Using Glide Icons in Rich Text?

Ask for Help
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