Using Glide Icons in Rich Text?

Ask for Help
1

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!

2

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

1 Like
3

This worked:

<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

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
CleanShot 2026-02-11 at 15.21.39@2x932×960 51.2 KB

Not terrible!

3 Likes
4

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

2 Likes
5

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

2 Likes
6

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.

Screenshot 2026-02-12 040452
Screenshot 2026-02-12 040452316×158 6.3 KB

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

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

2 Likes