Icon

<zeno-icon>Data displaySource

An icon: one of the registered shapes by name, an SVG file by src, or a slotted SVG. With a label it is announced as an image. Without one it is decoration and hidden from assistive technology.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Built-in names

These 15 names are built in. An icon without a label is decoration and is hidden from assistive technology.

<zeno-icon name="home"></zeno-icon>
<zeno-icon name="search"></zeno-icon>
<zeno-icon name="user"></zeno-icon>
<zeno-icon name="settings"></zeno-icon>
<zeno-icon name="heart"></zeno-icon>
<zeno-icon name="star"></zeno-icon>
<zeno-icon name="menu"></zeno-icon>
<zeno-icon name="check"></zeno-icon>
<zeno-icon name="x"></zeno-icon>
<zeno-icon name="plus"></zeno-icon>
<zeno-icon name="minus"></zeno-icon>
<zeno-icon name="chevron-up"></zeno-icon>
<zeno-icon name="chevron-down"></zeno-icon>
<zeno-icon name="chevron-left"></zeno-icon>
<zeno-icon name="chevron-right"></zeno-icon>

Sizes

Sizes are in em, so an icon grows with the text around it. The icon takes the text colour.

<zeno-icon name="star" size="xs"></zeno-icon>
<zeno-icon name="star" size="sm"></zeno-icon>
<zeno-icon name="star" size="md"></zeno-icon>
<zeno-icon name="star" size="lg"></zeno-icon>
<zeno-icon name="star" size="xl"></zeno-icon>

Variants

outline draws the lines, fill fills the shape, and both does both. Use fill only on icons that are closed shapes.

<zeno-icon name="heart" size="xl" variant="outline"></zeno-icon>
<zeno-icon name="heart" size="xl" variant="fill"></zeno-icon>
<zeno-icon name="heart" size="xl" variant="both"></zeno-icon>
<zeno-icon name="star" size="xl" variant="outline"></zeno-icon>
<zeno-icon name="star" size="xl" variant="fill"></zeno-icon>
<zeno-icon name="star" size="xl" variant="both"></zeno-icon>

An icon with a meaning

Give the icon a label when it stands alone and carries meaning. rotate spins the icon and pulse fades it in and out.

Applying settings

Waiting for a reply

<p><zeno-icon name="check" label="Saved"></zeno-icon></p>
<p><zeno-icon name="settings" rotate></zeno-icon> Applying settings</p>
<p><zeno-icon name="heart" pulse></zeno-icon> Waiting for a reply</p>

Your own SVG

Without name and src the icon shows the SVG placed inside it. The SVG takes the line style and colour of the icon.

<zeno-icon size="xl" label="Email">
  <svg viewBox="0 0 24 24">
    <rect x="3" y="5" width="18" height="14" rx="2"></rect>
    <path d="M3 7l9 6 9-6"></path>
  </svg>
</zeno-icon>

Attributes and properties

Property	Attribute	Type	Default	Description
name	namereflects	string	–
size	sizereflects	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
variant	variantreflects	'outline' | 'fill' | 'both'	'outline'
rotate	rotatereflects	boolean	false
pulse	pulsereflects	boolean	false
src	src	string	–
label	label	string	–
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

This element sends no events.

Slots

Slot	Description
Default	An inline SVG, used when neither name nor src is set.

CSS parts

Part
base

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

This element handles no keys of its own.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• Without a label the icon has aria-hidden="true", so assistive technology skips it.
• With a label the icon gets role="img" and the label as its name.
• The icon is not focusable and adds no keyboard behaviour.
• With reduced motion the rotate and pulse animations do not run.

Tests and known gaps

• Tested in a real browser by icon.test.ts.
• Checked with axe-core in the light and the dark theme.
• Has no Storybook story.

8 of the 12 properties, methods, events, slots and parts above have no description in the source

• the property name
• the property size
• the property variant
• the property rotate
• the property pulse
• the property src
• the property label
• the part base

Known gaps:

• A name that is not registered shows nothing and gives no warning.
• Only 15 names are built in. Other elements ask for names that are missing, such as eye in zeno-input and upload-cloud in zeno-file-upload.
• variant="fill" removes the stroke. Icons that are only lines (x, plus, minus, menu) disappear, and the chevrons and check become filled triangles.
• variant has no effect on an icon loaded with src.
• rotate and pulse cannot be used together. Both set the same CSS property, so only pulse runs.
• The name rotate suggests an angle, but it is an on or off spin. There is no way to turn an icon by a fixed angle.
• When the user asks for more contrast, line icons are drawn in the system ButtonText colour and no longer follow the text colour.
• An aria-label on the element is not used. Only label names the icon.