Icon

Renders a named icon from the built-in set at any size. The size prop (xs, sm, md, lg, xl, or a number in px) sets the icon size.

Jump to API reference

Import

Vue

import { UiIcon } from '@ziyarago/ui/vue'

Set

Vue

<UiIcon name="plane" :size="28" />

<UiIcon name="hotel" :size="28" />

<UiIcon name="map-pin" :size="28" />

<UiIcon name="calendar" :size="28" />

<UiIcon name="users" :size="28" />

<UiIcon name="star" :size="28" />

<UiIcon name="bell" :size="28" />

<UiIcon name="heart" :size="28" />

Sizes

Vue

<UiIcon name="landmark" size="xs" />

<UiIcon name="landmark" size="sm" />

<UiIcon name="landmark" size="md" />

<UiIcon name="landmark" size="lg" />

<UiIcon name="landmark" size="xl" />

Pixel sizes

Vue

<UiIcon name="landmark" :size="16" />

<UiIcon name="landmark" :size="24" />

<UiIcon name="landmark" :size="32" />

<UiIcon name="landmark" :size="48" />

API reference

Renders a named icon from the library at a chosen size.

Props

PropType and valuesDefaultDescription

namestring'circle'Icon name from the library, for example "check" or "map-pin".

sizexssmmdlgxl'md'Pixel size: xs 14, sm 16, md 20, lg 24, xl 32. A number is used directly as px.

Notes

The icon is aria-hidden; add a label on the surrounding control for accessibility.
Icons load lazily, so the glyph may appear a moment after first render.