Sections

Inline SVG icons

Icons can be used to visually communicate meaning to users and make pages more engaging.

Our themes use inline SVG for icons as they offer better page load performance and improved accessibility over font-based icon systems. We provide an excellent set to get started and there are many collections available online for free like Bootstrap Icons and Heroicons.

Zendesk’s default Copenhagen theme recently made this change with their move to version 2 of the theming API. For more information about the differences between font-based and inline SVG icons, refer to this article.

Usage

Use .svg-icon with an inline SVG icon to make it scale in relation to surrounding text.

Heading 1

Heading 2

Heading 3

A paragraph of text

<h1 class="my-4">Heading 1 <svg class="svg-icon">...</svg></h1>
<h2 class="my-4">Heading 2 <svg class="svg-icon">...</svg></h2>
<h3 class="my-4">Heading 3 <svg class="svg-icon">...</svg></h3>
<p>A paragraph of text <svg class="svg-icon">...</svg></p>

A variety of different icons are included within each of our themes, which you can mix-and-match. Below are some examples of commonly used SVG icons:

thumbs-up

thumbs-down

star

pin

chevron-up

chevron-right

chevron-down

chevron-left

arrow-up

arrow-right

arrow-down

arrow-left

gear

Sizes

Use font size or sizing utilities can be used to control how large an icon appears.

<svg class="svg-icon text-red-500"></svg>
<svg class="svg-icon text-red-500 font-size-2xl"></svg>
<svg class="svg-icon text-red-500 h-6 w-6"></svg>

Colors

Use .fill-current or .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.

<svg class="svg-icon font-size-2xl fill-current p-2 text-red-500"></svg>
<svg class="svg-icon font-size-2xl fill-current p-2 text-green-500"></svg>
<svg class="svg-icon font-size-2xl fill-current p-2 text-orange-500"></svg>
<svg class="svg-icon font-size-2xl fill-current p-2 text-gray-600"></svg>

Icon reference

Click on any of the icons on this page to copy the SVG code to the clipboard.

<mask fill="#fff> </mask> <path d="M17.6252814,5.50664746 C18.583231,6.61933269 17.533395,9.3264226 16.4896124,10.3702051 C15.4909168,11.3689007 13.9108118,11.4318321 12.8388429,10.5589992 L17.6252814,5.50664746 Z" fill="#fff></path> <mask fill="#fff> </mask> <mask fill="#fff> </mask> <mask fill="#fff> </mask> <rect fill="#fff x="13" y="8" width="3" height="3" rx="1"></rect> <rect fill="#fff transform="translate(16.612973, 8.673634) rotate(-15.000000) translate(-16.612973, -8.673634) " x="15.6129734" y="6.17363361" width="2" height="5" rx="1"></rect> <mask fill="#fff> </mask>