shoelace/docs/components/icon.md

Icon

[component-header:sl-icon]

Icons are symbols that can be used to represent or provide context to various options and actions within an application.

Shoelace comes bundled with over 1,000 icons courtesy of the Bootstrap Icons project. Click or tap on an icon below to copy the name and use it like this.

<sl-icon name="icon-name-here" hidden></sl-icon>

Outlined Filled All icons

Examples

Icon Sizes

Icons are sized relative to the current font size. To change their size, set the font-size property on the icon itself or on a parent element as shown below.

<div style="font-size: 32px;">
  <sl-icon name="exclamation-triangle"></sl-icon>
  <sl-icon name="archive"></sl-icon>
  <sl-icon name="battery-charging"></sl-icon>
  <sl-icon name="bell"></sl-icon>
  <sl-icon name="clock"></sl-icon>
  <sl-icon name="download"></sl-icon>
  <sl-icon name="file-earmark"></sl-icon>
  <sl-icon name="flag"></sl-icon>
  <sl-icon name="heart"></sl-icon>
  <sl-icon name="image"></sl-icon>
  <sl-icon name="lightning"></sl-icon>
  <sl-icon name="mic"></sl-icon>
  <sl-icon name="search"></sl-icon>
  <sl-icon name="star"></sl-icon>
  <sl-icon name="trash"></sl-icon>
  <sl-icon name="x-circle"></sl-icon>
</div>

Custom Icons

Custom icons can be loaded by setting the src attribute. Only SVG images are supported

<sl-icon src="/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>

[component-metadata:sl-icon]