If you don’t like the default “Search” text in your menu, you can replace it with an icon, just as many modern blogs do. You don’t need to edit any theme files; a small change to your site configuration is all it takes.

Open hugo.yaml (or hugo.toml) and add a search entry to your main menu.

hugo.yaml

1
2
3
4
5
6
7
8

menu:
  main:
    - identifier: search
      name: ""
      title: Search # keeps a tooltip and screen-reader label
      url: /search/
      weight: 40
      pre: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>'

hugo.toml

1
2
3
4
5
6
7

[[menu.main]]
  identifier = "search"
  name = ""
  title = "Search"
  url = "/search/"
  weight = 40
  pre = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>'

How it works

Setting name to an empty string removes the visible text, so only the icon shows. The title field keeps a tooltip on hover and a label for screen readers, which means the link stays accessible even without visible text.

The icon itself comes from the pre field, which holds an inline SVG that Hugo renders before the menu name. Because the SVG uses stroke="currentColor", it automatically follows your theme’s text color and looks right in both light and dark mode.

Finally, weight controls where the icon sits in the menu. Lower numbers come first, so adjust it to place the icon where you want it.

Things to check

  • If you already have a Search entry in your menu, modify that entry instead of adding a second one.
  • If you already have a menu: main: block, add the item to it rather than creating another.
  • If “search” shows up next to the icon after you save, your setup is falling back to the identifier when the name is empty. Check how your PaperMod version renders menu items.
  • Search needs to be set up in PaperMod already, with a search.md page in content/.

Finally, run hugo server, refresh the page, and the “Search” text will be replaced by a clean icon.