Icon

atom

Wrapper that sizes and colours any inline SVG to align with the type scale. Pass your own SVG as children.

"Add an Icon from lucent-ui wrapping a check-circle SVG. Use size="lg" and color the icon with the success token."

Usage

React / JSX

import { Icon } from 'lucent-ui'

<Icon size="md" label="Icon">Icon</Icon>

pnpm add lucent-ui

Icon props — * required

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Icon dimensions.
`color`	`string`	—	CSS colour value or CSS variable. Defaults to currentColor.
`label`	`string`	—	Accessible label (sets aria-label). If omitted the icon is decorative.
`children`*	`React.ReactNode`	—	An inline SVG element.