# 🛠️CSS Hack: Custom Icons

**URL:** <https://community.glideapps.com/t/css-hack-custom-icons/84586>\
**Category:** Community Resources\
**Tags:** custom-css, custom-code\
**Created:** [September 24, 2025, 8:13pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586 "2025-09-24T20:13:01Z")\
**Posts on this page:** 16\
**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:** [September 24, 2025, 8:13pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/1 "2025-09-24T20:13:01Z")

</div>

If you want to use your own SVG icons—on buttons, icons, or other elements—you can set your SVG as the element’s background and hide the original `<use>` to avoid overlap. This lets you apply any custom icon with your preferred color, size, and style.

```auto
.custom-icon button[aria-label="Custom Action"] svg {
    background: 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="white" 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="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
}

.custom-icon button[aria-label="Custom Action"] svg > use {
    display: none;
}

```

 ![Screenshot 2025-09-25 031823](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/8/e85d4a8af3564bf5a643764826f131ca8bfc1e47.png)

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [September 24, 2025, 9:39pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/2 "2025-09-24T21:39:37Z")

</div>

so cool!

---

<div class="post-metadata">

**Author:** ![Mazen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mazen/32/84042_2.png) [@Mazen](https://community.glideapps.com/u/Mazen)\
**Post date:** [September 24, 2025, 10:38pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/3 "2025-09-24T22:38:02Z")

</div>

Ive been waiting for it for so long!!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 24, 2025, 11:30pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/4 "2025-09-24T23:30:20Z")

</div>

Thanks for sharing!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [September 25, 2025, 12:47am UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/5 "2025-09-25T00:47:36Z")

</div>

Yeah! I just discovered the same thing last week when attempting to change the … menu into a + menu

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/3/43f36282a3be579af9062acd3dae678daeedea11.gif)

```auto
.plus-menu .action-container [data-testid=“menu-button”] svg {
width: 28px;
height: 28px;
background-image: (“data:image/svg+xml,%3Csvg xmlns=‘http://www.w3.org/2000/svg’ viewBox=‘0 0 24 24’%3E%3Cpath fill=‘none’ stroke=‘grey’ stroke-width=‘2’ d=‘M12 5v14m-7-7h14’/%3E%3C/svg%3E”) 1important;
background-repeat: no-repeat;
background-position: center;
transition: background-image 0.3s;
}

```

```auto

.plus-menu .action-container [data-testid=“menu-button”] svg use {
visibility:hidden;
}

```

the only thing I can’t figure out is how to get the stroke color to not be black in dark mode. I’m using currentColor in effor to change the color dynamically, but it’s not picking it up.

color: grey; kinda works…

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [September 25, 2025, 2:17am UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/6 "2025-09-25T02:17:24Z")

</div>

your clip is kind of hypnotic 😅

---

<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:** [September 25, 2025, 5:08am UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/8 "2025-09-25T05:08:04Z")

</div>

I discovered a condition that can be applied for dark mode (.dark-theme). You might try this:

```auto
.dark-theme .custom-icon button[aria-label="Custom Action"] svg

```

![ScreenRecording2025-09-25121603-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/3/03029ae12d0762b1d4578b5c62987f88943b7a99.gif)

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [September 25, 2025, 11:34am UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/9 "2025-09-25T11:34:57Z")

</div>

I did something similar on the community forum in the past, allowing custom image in list collection actions: [Change The Default "Three Dots" Icon With Custom CSS In List Collection](https://community.glideapps.com/t/change-the-default-three-dots-icon-with-custom-css-in-list-collection/80872)

Great job 🙂

---

<div class="post-metadata">

**Author:** ![Federico\_Fleitas](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/federico_fleitas/32/77461_2.png) [@Federico\_Fleitas](https://community.glideapps.com/u/Federico_Fleitas)\
**Post date:** [December 12, 2025, 4:06pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/11 "2025-12-12T16:06:35Z")

</div>

Hi,

I neel your help,What am I doing wrong?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/e/6ed2676e397c35fab19971a35150cfd1cb589760.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/4/242859cfa7070a5744164f6e70b43849dfa3f0c5.png)

---

<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:** [December 12, 2025, 4:33pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/12 "2025-12-12T16:33:43Z")

</div>

Can you provide some copyable code for testing?

---

<div class="post-metadata">

**Author:** ![Federico\_Fleitas](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/federico_fleitas/32/77461_2.png) [@Federico\_Fleitas](https://community.glideapps.com/u/Federico_Fleitas)\
**Post date:** [December 12, 2025, 4:40pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/13 "2025-12-12T16:40:10Z")

</div>

@Himaladin of course

.click button[aria-label=“Solicitar”] svg{  
background: url(‘data:image/svg+xml,’) no-repeat center center;  
width: 24px;  
height: 24px;  
display: inline-block;  
vertical-align: middle;  
background-size: contain;  
}  
.click button[aria-label=“Solicitar”] svg\>use{display: none;}

I can’t copy the link, what page can I copy it to? When I paste it into the community post editor, it disappears

---

<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:** [December 12, 2025, 4:49pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/14 "2025-12-12T16:49:27Z")

</div>

Where’s the `<path>` part? I mean the complete code you’re using. Use preformatted text to write that code.

 ![Screenshot 2025-12-12 234715](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/5/85b020525f5f5acc3032619bc3f56c81e59bde5f.png)

---

<div class="post-metadata">

**Author:** ![Federico\_Fleitas](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/federico_fleitas/32/77461_2.png) [@Federico\_Fleitas](https://community.glideapps.com/u/Federico_Fleitas)\
**Post date:** [December 12, 2025, 4:53pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/15 "2025-12-12T16:53:19Z")

</div>

```auto
.click button[aria-label="Solicitar"] svg{
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#d41717" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>') no-repeat center center;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
}
.click button[aria-label="Solicitar"] svg>use{display: none;}

```

---

<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:** [December 12, 2025, 5:21pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/16 "2025-12-12T17:21:39Z")

</div>

You can actually use my reference and simply ask GPT to replace the `<path>` for you.

```auto
.click button[aria-label="Solicitar"] svg { 
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg>') no-repeat center center;
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
}

.click button[aria-label="Solicitar"] svg > use { 
  display: none;
}

```

Alternatively, you can replace the “background SVG” by using `mask` and `-webkit-mask`, which allows you to color the icon using `background`.

> [@compass CSS Hack: Custom Navigation Icon](https://community.glideapps.com/t/css-hack-custom-navigation-icon/85296):
>
> This post expands on [hammer_and_wrench 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: Using standard SVG background replacement. Using mask / -webkit-mask for full color control. Using image backgrounds (for avatars or photo-based icons). 1. parrot Main…

Also, try testing it by removing the selector `[aria-label="Solicitar"]` since it may be translated. Let me know if it doesn’t work.

---

<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:** [December 13, 2025, 2:38am UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/17 "2025-12-13T02:38:20Z")

</div>

Have you managed to get it working?  
I see that the Twitter icon is already available in Glide — why do you still need to override it with CSS?

---

<div class="post-metadata">

**Author:** ![Federico\_Fleitas](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/federico_fleitas/32/77461_2.png) [@Federico\_Fleitas](https://community.glideapps.com/u/Federico_Fleitas)\
**Post date:** [December 14, 2025, 10:54pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586/18 "2025-12-14T22:54:30Z")

</div>

Hi @Himaladin i only test the Svg icons, thanks