Components
Icons
Render Material Symbols, decorative shapes, and any inline SVG.
Colorffy UI provides three icon components. All share base props — size, color, decorative, and ariaLabel (required when decorative is false). UiIconSvg also accepts uid to namespace IDs inside inlined SVG markup.
Material Symbols
Pass a Material Symbols entity code:
<template>
<UiIconMaterial icon-code="" />
<UiIconMaterial icon-code="" :size="32" color="var(--theme-primary-base)" />
</template>
Decorative shapes
<template>
<UiIconShapes shape="blob-3" />
<UiIconShapes shape="star-5" :size="48" />
</template>
Custom SVG
Paste any inline <svg> (e.g. from thesvg.org) into the default slot, or pass raw markup via content for data-driven icons from your own local registry:
<template>
<!-- Slot: paste the SVG directly -->
<UiIconSvg :size="32">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="…" /></svg>
</UiIconSvg>
<!-- content: for data-driven lists -->
<UiIconSvg v-for="logo in logos" :key="logo.name" :content="logo.svg" />
</template>
color recolors monochrome icons via currentColor; multi-color SVGs keep their own fills.
Shared base props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | — | Size token or px/em value. |
color | string | null | currentColor | Override color. |
decorative | boolean | true | Hide from assistive tech. |
ariaLabel | string | null | — | Required when decorative is false. |
uid | string | null | generated with useId() | Namespace seed for IDs inside inlined SVG markup. |
Per-component prop
| Component | Required prop | Values |
|---|---|---|
UiIconMaterial | iconCode | Material Symbols entity (e.g. ) |
UiIconShapes | shape | blob-1…blob-7, star-1…star-8, circle-1…circle-4, shape-1…shape-4, lighting-1 |
UiIconSvg | slot or content | Any inline <svg> markup — pasted in the slot, or a raw string via content; uid namespaces internal SVG IDs |