Icons

The Full build provides trace-icon to size and align an SVG or image alongside text. Supply your own artwork, such as a Lucide SVG.

#Icon libraries

Choose an SVG from any of these libraries and place it directly inside a trace-icon wrapper. You can paste the SVG markup inline or reference a downloaded file with img.

  • Lucide offers outline icons with adjustable stroke width.
  • Heroicons offers outline and filled icons in several sizes.
  • Tabler Icons offers outline and filled interface icons.
  • Phosphor Icons offers icons in multiple weights.
  • Bootstrap Icons offers SVG files for interface icons and brand marks.
  • Material Symbols offers downloadable SVGs in Outlined, Rounded, and Sharp styles.
<span class="trace-icon" aria-hidden="true">
  <img src="/icons/check.svg" alt="" />
</span>
Saved

#Inline icons

Place the artwork directly inside the wrapper. This Lucide check icon is decorative because the adjacent text already conveys the status.

<span class="trace-icon" aria-hidden="true"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M20 6 9 17l-5-5" />
</svg>
</span>
Saved
Saved

#Directional icons

Add trace-icon-directional to the wrapper if the icon should mirror in right-to-left layouts.

<span class="trace-icon trace-icon-directional" aria-hidden="true"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M5 12h14" />
  <path d="m12 5 7 7-7 7" />
</svg>
</span>
LTR
RTL

See Icon tokens for sizing and Buttons with icons for accessible icon-only buttons.