Icon

Provide consistent sizing and interaction for SVG or image icons.

<sy-icon>Installation guide Basic usage

Live preview

Interact with the component to see results here.

Size

Allow selectionOriginal aspect ratio

View code

HTML

<sy-icon size="xlarge" aria-label="Favorites"><svg
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  >
    <path fill="currentColor" d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
  </svg></sy-icon>

Usage guide

Support meaning or represent actions. Provide an accessible name for icon-only actions.

Provide SVG directly

Pass the icon through the SVG slot or svgMarkup.

Provide a file

Set path to a file URL accessible to the browser.

Examples

Size

Choose a size that matches the text and action area.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-icon size="small"><svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor"
        d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
    </svg></sy-icon>
  <sy-icon size="medium"><svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor"
        d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
    </svg></sy-icon>
  <sy-icon size="large"><svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor"
        d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
    </svg></sy-icon>
  <sy-icon size="xlarge"><svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor"
        d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
    </svg></sy-icon>
  <sy-icon size="xxlarge"><svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor"
        d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
    </svg></sy-icon>
</div>

Load from a file

Use path to load an SVG from your project.

View code

HTML

<sy-icon path="/assets/examples/star.svg" size="xxlarge"></sy-icon>

SVG string

Pass app-managed SVG content through the svgMarkup property.

View code

HTML

<sy-icon
  svg-markup="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z&quot;/&gt;&lt;/svg&gt;"
  size="xxlarge"
></sy-icon>

Select with the keyboard

Navigate with Tab, then select with Enter or Space.

View code

HTML

<sy-icon
  size="xxlarge"
  selectable
  aria-label="Favorites"
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path fill="currentColor" d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
  </svg></sy-icon>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-icon size="xlarge" aria-label="Favorites"><svg
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  >
    <path fill="currentColor" d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
  </svg></sy-icon>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Keep the original aspect ratio

Use naturalAspect to preserve the icon's original proportions. This is useful for logos or symbols that are not square.

View code

HTML

<sy-icon
  size="xlarge"
  natural-aspect
  aria-label="Favorites"
  id="supplement-1"
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path fill="currentColor" d="m12 2 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" />
  </svg></sy-icon>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "naturalAspect": true
  });
</script>

Feature examples

Choose a feature from 6 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Change icon sizes and Regular/Solid styles, then click an icon to copy its SVG code.

View code

HTML

Loading the example.

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Property · Path

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Selectable

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Size

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Events · Selected

Interact with the component to see event names and payloads in the live preview below.

View code

HTML

Loading the example.

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-icon>`

Properties

Type	Default	Description
`'xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge' \| 'xxxlarge'`	`'medium'`	Component size.
`string`	`undefined`	Icon SVG or image URL.
`string`	`undefined`	SVG markup string to display.
`boolean`	`false`	Preserve the original SVG aspect ratio.
`boolean`	`false`	Allow selection events and keyboard interaction.

Events

Event	Detail	Description
	`CustomEvent<{ value: string }>`	Emitted when the user selects an item.

Slots

Slot	Description
	Component body or child items.