Icon

SVG icon wrapper component providing standardized sizing and color theming. Wraps icon SVG children in a consistent <svg> container with accessible roles and theme-aware coloring.

Live Preview

Import

import { Icon } from 'entangle-ui';

Usage

<Icon size="md" color="primary">
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor" />
</Icon>

Most of the time you will use the pre-built icon components rather than Icon directly. Icon is the base building block they are built on.

import { SaveIcon, PlayIcon, SearchIcon } from 'entangle-ui';

<SaveIcon />
<PlayIcon />
<SearchIcon />

Sizes

The size prop controls the icon dimensions.

<Icon size="sm">{/* 12px icon */}</Icon>
<Icon size="md">{/* 16px icon */}</Icon>
<Icon size="lg">{/* 20px icon */}</Icon>

Size	Dimensions	Use case
`sm`	12x12px	Compact toolbars, inline indicators
`md`	16x16px	Standard buttons and controls
`lg`	20x20px	Prominent actions, headers

Colors

Standard theme colors are applied via CSS class variants. Custom CSS color values are also supported.

{/* Standard theme colors */}
<Icon color="primary">{/* ... */}</Icon>
<Icon color="secondary">{/* ... */}</Icon>
<Icon color="muted">{/* ... */}</Icon>
<Icon color="accent">{/* ... */}</Icon>
<Icon color="success">{/* ... */}</Icon>
<Icon color="warning">{/* ... */}</Icon>
<Icon color="error">{/* ... */}</Icon>

{/* Custom CSS color value */}
<Icon color="#ff6b00">{/* ... */}</Icon>
<Icon color="rgb(100, 200, 50)">{/* ... */}</Icon>

Accessible Title

Add a title for screen readers when the icon conveys meaning.

<Icon title="Save file" color="primary">
  <path d="..." fill="currentColor" />
</Icon>

Decorative Icons

Set decorative to true for icons that are purely visual and should be hidden from assistive technology.

<Icon decorative>
  <path d="..." fill="currentColor" />
</Icon>

When decorative is true, the icon renders with aria-hidden="true" and role="presentation". The title element is also omitted.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	SVG content (paths, circles, etc.) to render inside the icon.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Icon size controlling width and height.
`color`	`'primary' \| 'secondary' \| 'muted' \| 'accent' \| 'success' \| 'warning' \| 'error' \| string`	`'primary'`	Icon color. Standard theme tokens or any CSS color value.
`title`	`string`	—	Accessible title for the icon. Renders a <title> element inside the SVG.
`decorative`	`boolean`	`false`	Whether the icon is decorative only. Sets aria-hidden and role=presentation.
`className`	`string`	—	Additional CSS class names.
`testId`	`string`	—	Test identifier for automated testing.
`ref`	`Ref<SVGSVGElement>`	—	Ref to the underlying SVG element.

Accessibility

Non-decorative icons render with role="img" and support a <title> element for screen readers
Decorative icons set aria-hidden="true" and role="presentation" to hide from assistive technology
Always provide a title when the icon conveys meaning that is not available through surrounding text
When using icons inside buttons, prefer adding aria-label on the button rather than title on the icon