# Using Glide Icons in Rich Text?

**URL:** <https://community.glideapps.com/t/using-glide-icons-in-rich-text/86321>\
**Category:** Ask for Help\
**Created:** [February 11, 2026, 8:07pm UTC](https://community.glideapps.com/t/using-glide-icons-in-rich-text/86321 "2026-02-11T20:07:56Z")\
**Posts on this page:** 7\
**Page:** 1

<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:** [February 11, 2026, 8:07pm UTC](https://community.glideapps.com/t/using-glide-icons-in-rich-text/86321/1 "2026-02-11T20:07:56Z")

</div>

Hey all? Has anyone found a way to insert an icon from the Glide icon library into a Rich Text component? I’ve been able to achieve the effect I want by creating a button and then styling the button to look like a Title Component of sorts, but thought it might be more efficient to create the rich text. Thanks!

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 11, 2026, 8:11pm UTC](https://community.glideapps.com/t/using-glide-icons-in-rich-text/86321/2 "2026-02-11T20:11:37Z")

</div>

Could probably grab the SVG code and put that into the rich text component as an image.

---

<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:** [February 11, 2026, 8:22pm UTC](https://community.glideapps.com/t/using-glide-icons-in-rich-text/86321/3 "2026-02-11T20:22:13Z")

</div>

This worked:

```auto
<div style="display: flex; align-items: center; gap: 8px;"> 
<img src="https://go.glideapps.com/svg/stroke/st-users.svg?" width="24" height="24" />
<h4 style="margin: 0;">Group Details</h4>
</div>

```

…but the icon was black which isn’t dark mode friendly.

I could colorize it by adding

```auto
style="opacity: 0.8; filter: invert(49%) sepia(59%) saturate(415%) hue-rotate(85deg) brightness(91%) contrast(89%);" 

```

to the `<img>` which results in this:

 ![CleanShot 2026-02-11 at 15.21.39@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/1/113bb7c6bfa76cbf2d73c0bdbc72dc6a952fae1a.png)  
Not terrible!

---

<div class="post-metadata">

**Author:** ![Carbonsquare](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carbonsquare/32/55224_2.png) [@Carbonsquare](https://community.glideapps.com/u/Carbonsquare)\
**Post date:** [February 11, 2026, 8:37pm UTC](https://community.glideapps.com/t/using-glide-icons-in-rich-text/86321/4 "2026-02-11T20:37:15Z")

</div>

You could also use a Hint element as a title since that allows for the adding of Glide icons directly. That’s what we do on our entry forms. I’m sure you probably already know that and I just re-read your post and see you were trying to style your button component. 😊

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 11, 2026, 8:45pm UTC](https://community.glideapps.com/t/using-glide-icons-in-rich-text/86321/5 "2026-02-11T20:45:22Z")

</div>

If you open that svg, and grab the actual draw path, then you can alter the stroke color, width, and other variables. Then just paste the SVG tag instead of an IMG tag.

You can also set width and height attributes in the SVG tag

---

<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:** [February 11, 2026, 9:37pm UTC](https://community.glideapps.com/t/using-glide-icons-in-rich-text/86321/6 "2026-02-11T21:37:06Z")

</div>

The approach @Jeff_Hager also works.

With the **mask method** , you can separate the **icon’s shape** from its color: the mask defines the shape, while the `background` sets the color (solid or gradient). I’ve shared this approach before in [Compass CSS Hack: Custom Navigation Icon](https://community.glideapps.com/t/css-hack-custom-navigation-icon/85296).

 ![Screenshot 2026-02-12 040452](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/88f16c44be331cfee9181ce35a8acbcd13cc797d.png)

```auto
<div style="display:inline-flex;align-items:center;gap:4px;font-size:24px;font-weight:bold;">
  <span style="width:38px;height:38px;display:inline-block;
    background:linear-gradient(45deg,red,#22d3ee);
    -webkit-mask:url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 28 28\'%3E%3Cpath d=\'m6.48 13.737 8.553-8.553v4.198a4.354 4.354 0 0 1-4.355 4.355H6.48ZM13.478 16.536a4.354 4.354 0 0 1 4.354-4.354h4.199l-8.553 8.553v-4.2Z\' fill=\'currentColor\'/%3E%3C/svg%3E') no-repeat center/contain;
    mask:url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 28 28\'%3E%3Cpath d=\'m6.48 13.737 8.553-8.553v4.198a4.354 4.354 0 0 1-4.355 4.355H6.48ZM13.478 16.536a4.354 4.354 0 0 1 4.354-4.354h4.199l-8.553 8.553v-4.2Z\' fill=\'currentColor\'/%3E%3C/svg%3E') no-repeat center/contain;
    -webkit-mask-composite:destination-in;">
  </span>
  <span>The Glide Icon</span>
</div>

```

---

<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:** [February 11, 2026, 10:06pm UTC](https://community.glideapps.com/t/using-glide-icons-in-rich-text/86321/7 "2026-02-11T22:06:56Z")

</div>

Thanks for sharing. I was hoping to not have to redraw the SVG, but rather use the url reference to the icon.