ld-icon #

An icon provides a visual hint for content or interactions. Combine it with textual information for a better user experience. When using an icon on its own, make sure to either apply an aria-label or use the ld-sr-only component.

Examples #

<ld-icon name="placeholder"></ld-icon>

<span class="ld-icon" role="presentation">
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>

Different sizes #

<ld-icon name="placeholder" size="sm"></ld-icon>

<ld-icon name="placeholder"></ld-icon>

<ld-icon name="placeholder" size="lg"></ld-icon>

<span class="ld-icon ld-icon--sm" role="presentation">
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>

<span class="ld-icon" role="presentation">
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>

<span class="ld-icon ld-icon--lg" role="presentation">
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>

Color #

Liquid's icons use the currentColor value for fills or strokes, which means that you can adjust the icon color by setting the color property value of the ld-icon component or a wrapping element.

<ld-icon name="placeholder" style="color: var(--ld-col-vc)"></ld-icon>

<span style="color: var(--ld-col-vg)">
  <ld-icon name="placeholder"></ld-icon>
</span>

<span class="ld-icon" role="presentation" style="color: var(--ld-col-vc)">
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>

<span style="color: var(--ld-col-vg)">
  <span class="ld-icon" role="presentation">
    <svg viewBox="0 0 24 24" fill="none">
      <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
      <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
    </svg>
  </span>
</span>

With custom SVG icon #

<ld-icon>
  <svg viewBox="0 0 24 24"><path fill="currentColor" d="M16.48 20.335a3.622 3.622 0 01-7.244 0h7.244zm2.748-6.48l2.024 1.94c.297.284.464.677.464 1.088v.801c0 .833-.675 1.51-1.508 1.51h-14.7A1.51 1.51 0 014 17.683v-.76c0-.434.188-.848.516-1.134l1.922-1.683c.328-.286.516-.7.516-1.135V8.858a5.878 5.878 0 013.498-5.37c.556-.249.931-.78.931-1.39v-.622a1.476 1.476 0 112.952 0v.622c0 .61.375 1.141.931 1.39 2.06.918 3.5 2.97 3.5 5.37v3.908c0 .411.167.805.463 1.09z" fill-rule="evenodd"/></svg>
</ld-icon>

<span class="ld-icon" role="presentation">
  <svg viewBox="0 0 24 24"><path fill="currentColor" d="M16.48 20.335a3.622 3.622 0 01-7.244 0h7.244zm2.748-6.48l2.024 1.94c.297.284.464.677.464 1.088v.801c0 .833-.675 1.51-1.508 1.51h-14.7A1.51 1.51 0 014 17.683v-.76c0-.434.188-.848.516-1.134l1.922-1.683c.328-.286.516-.7.516-1.135V8.858a5.878 5.878 0 013.498-5.37c.556-.249.931-.78.931-1.39v-.622a1.476 1.476 0 112.952 0v.622c0 .61.375 1.141.931 1.39 2.06.918 3.5 2.97 3.5 5.37v3.908c0 .411.167.805.463 1.09z" fill-rule="evenodd"/></svg>
</span>

Available icons #

All icons listed below are bundled with Liquid. As a developer, you don't need to download any of the icons. Just use the ld-icon component and insert the name of the desired icon, as illustrated in the examples above. Right-click on the icons below to copy their technical names for use in the ld-icon component.

Left-click an icon below to download its SVG file. To download all icons at once, use this button:

Download all icons

Properties #

Property	Attribute	Description	Type	Default
`key`	`key`	for tracking the node's identity when working with lists	`string \| number`	`undefined`
`name`	`name`	The icon name.	`string`	`null`
`ref`	`ref`	reference to component	`any`	`undefined`
`size`	`size`	Size of the icon.	`"lg" \| "sm"`	`undefined`

Slots #

Slot	Description
	(optional) Custom SVG icon (only valid without name prop).

Shadow Parts #

Part	Description
`"icon"`	Actual SVG element

Dependencies #

Used by #

Graph #

graph TD;
  ld-accordion-toggle --> ld-icon
  ld-badge --> ld-icon
  ld-header --> ld-icon
  ld-input-message --> ld-icon
  ld-notice --> ld-icon
  ld-pagination --> ld-icon
  ld-sidenav-header --> ld-icon
  ld-sidenav-navitem --> ld-icon
  ld-sidenav-toggle-outside --> ld-icon
  style ld-icon fill:#f9f,stroke:#333,stroke-width:4px