Icon

<ts-icon> vv0.4.0

The ts-icon component.

Open in Storybook for interactive demos.

Preview

<ts-icon color="currentColor" size="md">Content</ts-icon>

Property	Attribute	Type	Default	Description
`color`	`color`	`string`	`'currentColor'`	CSS color value applied to the icon.
`label`	`label`	`string \| undefined`	—	Accessible label. When set, applies role=“img” and aria-label. When absent, sets aria-hidden=“true”.
`name`	`name`	`string \| undefined`	—	Icon name — resolves from custom registry first, then built-in Lucide icons. Accepts kebab-case or PascalCase.
`size`	`size`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`	The icon’s size.
`src`	`src`	`string \| undefined`	—	URL to an external SVG icon file.

Name	Description
`(default)`	Default slot for inline SVG content.

Use ::part() to style internal elements:

Part	Description
`img`	The img element (when using src prop).
`svg`	The container for resolved SVG content (when using name prop).

ts-icon::part(img) {
  /* your custom styles */
}

<ts-icon color="currentColor" size="md">Content</ts-icon>

import { TsIcon } from '@tessera-ui/react';

<TsIcon color="currentColor" size="md">Content</TsIcon>