Icon

Render a registered SVG symbol with the surrounding text color and a deliberate accessible name.

Icon

View source ยท API reference

Icons alongside text

Decorative symbols support visible labels without repeating them to assistive technology.

Checks passed
Inbox 
<Flex wrap="true" align="center">
  <Flex align="center">
    <Icon name="lucide:check" aria-hidden="true" />
    <span>Checks passed</span>
  </Flex>
  <Flex align="center">
    <Icon name="lucide:mail" aria-hidden="true" />
    <span>Inbox</span>
  </Flex>
</Flex>

A standalone symbol

When an icon is the only content, provide its meaning on a semantic wrapper.

<span role="img" aria-label="Checks passed" class="fs-h2">
  <Icon name="lucide:check" aria-hidden="true" />
</span>

Behavior and accessibility

The component renders no output for an empty or unresolved icon name. Icon does not supply button semantics. Put actions in Btn and give icon-only controls an ariaLabel.

API reference

Icon contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

name

RefOrValue<string>
Default
not set

Exact registered icon name, including its collection prefix, for example lucide:check. The icon resolver returns trusted SVG markup.

Composition

No slots. Register defineIconComponents with a resolver returning SVG markup for the icons your app uses. SSG already provides its icon registry.

Browser registration

import { defineIconComponents } from '@purestack/ts-components'
import { lucide_check } from '@purestack/ts-svg-icons'

const icons: Record<string, string> = { 'lucide:check': lucide_check }
const components = defineIconComponents((name) => icons[name] ?? '')