All components
Icon
A sizing wrapper for inline SVG icons that inherits the current text color.
Sizes
inherit
xs
sm
md
lg
xl
2xl
Install
zsh — icon
1bunx stylexblocks add iconUsage — Ark UI
icon.tsx
123456789101112131415161718import { Icon } from "#components/ui/ark-ui/icon.tsx";
export function Example() { return ( <> {/* the component is an svg element — viewBox and paths pass through, and the size prop resolves through the StyleX recipe */} <Icon viewBox="0 0 24 24" fill="none" size="md" aria-hidden="true"> <path d="M13 2 4.5 13.5H11L10 22l8.5-11.5H12L13 2Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" /> </Icon>
{/* composition: asChild sizes an existing icon component */} <Icon asChild size="lg"> <BoltIcon /> </Icon> </> );}