# 🧭 CSS Hack: Custom Navigation Icon

**URL:** <https://community.glideapps.com/t/css-hack-custom-navigation-icon/85296>\
**Category:** Community Resources\
**Tags:** custom-css, tutorial\
**Created:** [November 10, 2025, 3:46am UTC](https://community.glideapps.com/t/css-hack-custom-navigation-icon/85296 "2025-11-10T03:46:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 10, 2025, 3:46am UTC](https://community.glideapps.com/t/css-hack-custom-navigation-icon/85296/1 "2025-11-10T03:46:51Z")

</div>

This post expands on **[🛠 CSS Hack: Custom Icons](https://community.glideapps.com/t/css-hack-custom-icons/84586)** — 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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/4/84c4ab19c90510941c2de159dec185cd6cb9594d.png)

* * *

### 1. 🦜 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`:

```auto
: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:

```auto
: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. 🍔 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.

```auto
: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;
}

```