🧭 CSS Hack: Custom Navigation Icon

Community Resources
,
1

This post expands on :hammer_and_wrench: CSS Hack: Custom Icons — showing how to apply custom SVG or image-based icons inside navigation buttons across different layouts (top-bar, sidebar, and mobile navigation).

This guide demonstrates three main techniques for customizing navigation icons:

  1. Using standard SVG background replacement.
  2. Using mask / -webkit-mask for full color control.
  3. Using image backgrounds (for avatars or photo-based icons).

Screenshot 2025-11-09 111529
Screenshot 2025-11-09 111529341×736 21.4 KB

1. :parrot: Main nav bar (Top-bar, Sidebar & Mobile)

a. Standard SVG

Use this method if you just want to display the SVG as-is and control its color using fill or stroke:

:is(.main-nav button:nth-of-type(2), .sidebar-root li:nth-of-type(2)) svg {
  border-radius: 50%;
  background: center / contain no-repeat
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M7.5 15.75C9.57107 15.75 11.25 14.0711 11.25 12C11.25 9.92893 9.57107 8.25 7.5 8.25C5.42893 8.25 3.75 9.92893 3.75 12C3.75 14.0711 5.42893 15.75 7.5 15.75Z' stroke='red' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M11.5368 18.6953L14.1683 14.748C14.5641 14.1543 15.4366 14.1543 15.8324 14.748L18.4639 18.6953C18.9069 19.3598 18.4305 20.25 17.6318 20.25H12.3689C11.5702 20.25 11.0938 19.3598 11.5368 18.6953Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M11.25 5.59803C11.25 5.59803 14.4125 2.83251 15.9938 4.06761C18.3502 5.90813 13.3584 8.14891 13.8854 9.16903C14.4125 10.1891 17.9368 7.98854 19.6834 9.679C20.7376 10.6993 20.0694 12.1294 19.6834 13.25' stroke='red' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

:is(.main-nav button:nth-of-type(2), .sidebar-root li:nth-of-type(2)) svg use {
  display: none;
}

b. Using mask / -webkit-mask for full color control

This method replaces the standard SVG approach above if you want to apply a uniform color to your icon using the mask and background-color technique:

:is(.main-nav button:nth-of-type(2), .sidebar-root li:nth-of-type(2)) svg {
  border-radius: 50%;
  background-color: #ff0000;
  -webkit-mask: center / contain no-repeat
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M7.5 15.75C9.57107 15.75 11.25 14.0711 11.25 12C11.25 9.92893 9.57107 8.25 7.5 8.25C5.42893 8.25 3.75 9.92893 3.75 12C3.75 14.0711 5.42893 15.75 7.5 15.75Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M11.5368 18.6953L14.1683 14.748C14.5641 14.1543 15.4366 14.1543 15.8324 14.748L18.4639 18.6953C18.9069 19.3598 18.4305 20.25 17.6318 20.25H12.3689C11.5702 20.25 11.0938 19.3598 11.5368 18.6953Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M11.25 5.59803C11.25 5.59803 14.4125 2.83251 15.9938 4.06761C18.3502 5.90813 13.3584 8.14891 13.8854 9.16903C14.4125 10.1891 17.9368 7.98854 19.6834 9.679C20.7376 10.6993 20.0694 12.1294 19.6834 13.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask: center / contain no-repeat
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M7.5 15.75C9.57107 15.75 11.25 14.0711 11.25 12C11.25 9.92893 9.57107 8.25 7.5 8.25C5.42893 8.25 3.75 9.92893 3.75 12C3.75 14.0711 5.42893 15.75 7.5 15.75Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M11.5368 18.6953L14.1683 14.748C14.5641 14.1543 15.4366 14.1543 15.8324 14.748L18.4639 18.6953C18.9069 19.3598 18.4305 20.25 17.6318 20.25H12.3689C11.5702 20.25 11.0938 19.3598 11.5368 18.6953Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M11.25 5.59803C11.25 5.59803 14.4125 2.83251 15.9938 4.06761C18.3502 5.90813 13.3584 8.14891 13.8854 9.16903C14.4125 10.1891 17.9368 7.98854 19.6834 9.679C20.7376 10.6993 20.0694 12.1294 19.6834 13.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

:is(.main-nav button:nth-of-type(2), .sidebar-root li:nth-of-type(2)) svg use {
  display: none;
}

2. :hamburger: Avatar inside the More menu (desktop & mobile) — image

Note: The sidebar “More” menu uses a different button index, but this selector safely distinguishes it from the main navigation buttons.

:is([data-radix-menu-content] [role="menuitem"]:nth-of-type(2), [aria-label="Side Navigation"] li:nth-of-type(2), .sidebar-root hr ~ li:nth-of-type(5)) svg {
  border-radius: 50%;
  background: center / cover no-repeat
    url("https://pngimg.com/d/apple_PNG12503.png");
}

:is([data-radix-menu-content] [role="menuitem"]:nth-of-type(2), [aria-label="Side Navigation"] li:nth-of-type(2), .sidebar-root hr ~ li:nth-of-type(5)) svg use {
  display: none;
}
3 Likes