# 🛠️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:** 1\
**Showing post:** 16

<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.

---

_[View the full topic](https://community.glideapps.com/t/css-hack-custom-icons/84586)._