shoelace/docs/components/icon.md

Icon

[component-header:sl-icon]

Icons are symbols that can be used to represent various options within an application.

Shoelace comes bundled with over 1,100 icons courtesy of the Bootstrap Icons project. If you prefer, you can also register custom icon libraries.

Click or tap on an icon below to copy its name and use it like this.

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

Outlined Filled All icons

Examples

Sizing

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 individually with the src attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a custom icon library.

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

[component-metadata:sl-icon]