Instead of bloating our themes with extra font files containing icons that you may or may not use, we inline SVG icons which offer better page load performance and improved accessibility over font-based icon systems. Zendesk’s default Copenhagen theme recently made the same change with the release of the new theming API.
Our Icons page contains an excellent starter set of icons and there are many collections (and thousands of icons) available online for free like Bootstrap Icons, Heroicons and Icons8.
For more information about the differences between font-based and inline SVG icons, refer to this article.
.svg-icon with an inline SVG icon to make it scale in relation to surrounding text.
A paragraph of text
A variety of different icons are included within each of our themes, which you can mix-and-match.
Some examples of commonly used SVG icons include:
Use font size or sizing utilities can be used to control how large an icon appears.
.stroke-current to set the fill or stroke color of the SVG to the current text color. Text color utilities can then be used to control the color of an icon.
Please sign in to leave a comment.