Skip to main content Guide Components Icons Utilities Layouts
Button Call to Action Theme Toggle Checkbox Combobox File Input Input Group Radio Input Range Select Input Switch Text Input Textarea Avatar Billboard Icon Breadcrumbs Header Pagination Series Nav Sidenav Subnav Tabs Table of Contents Dialog Disclosure Dropdown Menu Accordion Alert Badge Calendar Tile Callout Card Code Block CTA Band Datum Empty State Footer Grid Hero Link Hub List Loading Indicator Prose Quote Record List Sponsor Stat Step Indicator Table Timeline

Icon

<vox-icon> renders one icon from the shared VoxBlocks icon set as inline SVG, so it inherits color and scales like text. Every icon shares one drawing rule: 48×48 viewBox, 2px stroke, round caps and joins, currentColor — the same convention used throughout the docs and the real OpenVox product marks.

Icons are decorative by default (aria-hidden). Set label when the icon is the only content conveying meaning, e.g. an icon-only button.

A handful of components use this set internally too — <vox-alert> and <vox-callout> render a variant-matched icon automatically, and <vox-sidenav-item>/<vox-card>/<vox-empty-state>/<vox-link-hub-item> accept one through an icon slot.

Browse the full icon set to see every available name.

<vox-icon name="search"></vox-icon> <vox-icon name="chevron-down"></vox-icon>

Sizes

sm (16px), md (20px, default), lg (24px), xl (48px — the icon’s native viewBox size, undownscaled; reach for it in a hero-style moment like an empty state’s icon).

<vox-icon name="search" size="sm"></vox-icon> <vox-icon name="search" size="xl"></vox-icon>

Color

Icons inherit color from their context — no separate color prop. Pair with the utility color classes or a component’s own text color.

<span class="vox-color-warning"> <vox-icon name="warning"></vox-icon> </span>

Right-to-left pages

Icons are not mirrored under dir="rtl" by default: a chevron-right often means the right-hand side of the screen — a panel edge, a scroll affordance — and should stay where it is. Add flip-rtl when the icon points along the reading direction instead, meaning “next”, “back” or “onward”, and it mirrors wherever the text runs right-to-left.

default — still points right flip-rtl — follows the text
<vox-icon name="arrow-right" flip-rtl></vox-icon>

Arrows and chevrons that a component draws itself — the CTA arrow, Series Nav’s prev/next, the Disclosure chevron — already mirror on their own; flip-rtl is only for icons you place yourself. See Internationalization.

Accessible icon-only controls

Icons render aria-hidden="true" by default, since they’re normally paired with visible text. Set label when an icon is the only content — most often an icon-only button.

<vox-button size="sm"> <vox-icon name="delete" label="Delete"></vox-icon> </vox-button>

API

Attribute Type Default Description
name IconName — Which icon to draw
size sm | md | lg | xl md 16 / 20 / 24 / 48px
label string — Accessible name; omit for decorative icons
flip-rtl boolean false Mirror the icon under dir="rtl"; for icons that point along the text