← Components

Icons

SVG icons loaded from the consumer's assets/svg-icons/ directory via <UxIcon id="..." />. All icons inherit color from currentColor and scale with width/height classes.

Size
Color
arrow-head
arrow-right
arrow-up
arrow-up-round
check
check-fat
copy
dash
dns
down-arrow
edit
exclaim
external-link
join
logo
no
plus
plus-fat
quote
search
spinner
traffic-source
triangle
view
x
x-big

Usage

Use <UxIcon> with the icon's id. Click any icon above to copy its snippet.

<UxIcon id="arrow-right" class="w-4 h-4" /> <UxIcon id="check" class="w-5 h-5 text-leaf-500" /> <UxIcon id="spinner" class="w-6 h-6 animate-spin" />

Icons use currentColor for both fill and stroke, so they inherit text color from their parent or a text-* utility class.

SVG files live in ~/assets/svg-icons/ in the consumer project (e.g. arrow-right.svgid="arrow-right").