# 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:** 1\
**Showing post:** 6

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

```

---

_[View the full topic](https://community.glideapps.com/t/using-glide-icons-in-rich-text/86321)._