Icons

Usage

<UiIcon icon="caretRight" />
<UiButton icon="plus">New</UiButton>

Most components that accept an icon prop (Button, Input, Alert, menu items, …) resolve it through the same UiIcon component under the hood.

Sizes

Or pass an exact pixel value instead of a named size, e.g. :size="28".

Filled

A few icons ship a filled counterpart alongside the outline. Pass fill to get it — every other icon ignores the prop, so it's safe to bind dynamically.

<UiIcon icon="play" />
<UiIcon icon="play" fill />

The older checkmarkFill-style names still resolve to the same artwork, so string-only APIs (toast entries, Status items) can keep asking for a filled icon by name alone.

Adding your own

Drop a new PascalCase.vue file into the icon directory — an SVG with a size prop, viewBox="0 0 24 24", and stroke="currentColor" (or fill="currentColor" for solid icons) — and it's immediately usable by its camelCase name, no registration step.

<template>
    <svg :width="size" :height="size" viewBox="0 0 24 24" fill="none">
        <path d="M12 4V20M4 12H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
    </svg>
</template>

<script lang="ts" setup>
interface IconProps {
    size?: number;
}

withDefaults(defineProps<IconProps>(), {
    size: 24,
});
</script>