Icons

Entangle UI includes 63 built-in SVG icons designed for editor interfaces. All icons use the Icon component wrapper, support consistent sizing and coloring through theme tokens, and are tree-shakeable.

Icon Gallery

Import

Import icons individually for optimal tree-shaking:

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

Usage

// Standalone icon
<SaveIcon size="md" />

// Inside a button
<Button icon={<SaveIcon />}>Save</Button>

// With IconButton
<IconButton icon={<TrashIcon />} label="Delete" />

Sizing

All icons accept the same size prop as other components:

Size	Dimensions
`sm`	14x14px
`md`	16x16px
`lg`	20x20px

<AddIcon size="sm" />
<AddIcon size="md" />
<AddIcon size="lg" />

Icon Reference

Actions

Icon	Name	Import
+	AddIcon	`import { AddIcon } from 'entangle-ui'`
✕	CloseIcon	`import { CloseIcon } from 'entangle-ui'`
✓	CheckIcon	`import { CheckIcon } from 'entangle-ui'`
✎	EditIcon	`import { EditIcon } from 'entangle-ui'`
🗑	TrashIcon	`import { TrashIcon } from 'entangle-ui'`
💾	SaveIcon	`import { SaveIcon } from 'entangle-ui'`
▶	PlayIcon	`import { PlayIcon } from 'entangle-ui'`
↺	UndoIcon	`import { UndoIcon } from 'entangle-ui'`
↻	RedoIcon	`import { RedoIcon } from 'entangle-ui'`
↻	RefreshIcon	`import { RefreshIcon } from 'entangle-ui'`
✂	CutIcon	`import { CutIcon } from 'entangle-ui'`
❐	CopyIcon	`import { CopyIcon } from 'entangle-ui'`
📋	PasteIcon	`import { PasteIcon } from 'entangle-ui'`

Icon	Name	Import
←	ArrowLeftIcon	`import { ArrowLeftIcon } from 'entangle-ui'`
→	ArrowRightIcon	`import { ArrowRightIcon } from 'entangle-ui'`
↑	ArrowUpIcon	`import { ArrowUpIcon } from 'entangle-ui'`
↓	ArrowDownIcon	`import { ArrowDownIcon } from 'entangle-ui'`
▾	ChevronDownIcon	`import { ChevronDownIcon } from 'entangle-ui'`
▴	ChevronUpIcon	`import { ChevronUpIcon } from 'entangle-ui'`
☰	MenuIcon	`import { MenuIcon } from 'entangle-ui'`
🏠	HomeIcon	`import { HomeIcon } from 'entangle-ui'`

File & Data

Icon	Name	Import
📁	FolderIcon	`import { FolderIcon } from 'entangle-ui'`
↓	DownloadIcon	`import { DownloadIcon } from 'entangle-ui'`
↑	UploadIcon	`import { UploadIcon } from 'entangle-ui'`
🔗	LinkIcon	`import { LinkIcon } from 'entangle-ui'`
🔖	BookmarkIcon	`import { BookmarkIcon } from 'entangle-ui'`
🏷	TagIcon	`import { TagIcon } from 'entangle-ui'`

View & Display

Icon	Name	Import
👁	EyeIcon	`import { EyeIcon } from 'entangle-ui'`
🔍+	ZoomInIcon	`import { ZoomInIcon } from 'entangle-ui'`
🔍-	ZoomOutIcon	`import { ZoomOutIcon } from 'entangle-ui'`
⛶	FullscreenIcon	`import { FullscreenIcon } from 'entangle-ui'`
▣	MaximizeIcon	`import { MaximizeIcon } from 'entangle-ui'`
▫	MinimizeIcon	`import { MinimizeIcon } from 'entangle-ui'`
▦	GridIcon	`import { GridIcon } from 'entangle-ui'`
☰	ListIcon	`import { ListIcon } from 'entangle-ui'`
⇅	SortIcon	`import { SortIcon } from 'entangle-ui'`
▼	FilterIcon	`import { FilterIcon } from 'entangle-ui'`
🔍	SearchIcon	`import { SearchIcon } from 'entangle-ui'`

Status & Feedback

Icon	Name	Import
✓	SuccessIcon	`import { SuccessIcon } from 'entangle-ui'`
⚠	WarningIcon	`import { WarningIcon } from 'entangle-ui'`
✕	ErrorIcon	`import { ErrorIcon } from 'entangle-ui'`
ℹ	InfoIcon	`import { InfoIcon } from 'entangle-ui'`
?	HelpIcon	`import { HelpIcon } from 'entangle-ui'`

Security

Icon	Name	Import
🔒	LockIcon	`import { LockIcon } from 'entangle-ui'`
🔓	UnlockIcon	`import { UnlockIcon } from 'entangle-ui'`

Misc

Icon	Name	Import
⚙	SettingsIcon	`import { SettingsIcon } from 'entangle-ui'`
👤	UserIcon	`import { UserIcon } from 'entangle-ui'`
♥	HeartIcon	`import { HeartIcon } from 'entangle-ui'`
★	StarIcon	`import { StarIcon } from 'entangle-ui'`
●	CircleIcon	`import { CircleIcon } from 'entangle-ui'`
🕐	ClockIcon	`import { ClockIcon } from 'entangle-ui'`
📅	CalendarIcon	`import { CalendarIcon } from 'entangle-ui'`
</>	CodeIcon	`import { CodeIcon } from 'entangle-ui'`
💧	EyeDropperIcon	`import { EyeDropperIcon } from 'entangle-ui'`
🤖	RobotIcon	`import { RobotIcon } from 'entangle-ui'`

AI

Icon	Name	Import
💬	AiChatIcon	`import { AiChatIcon } from 'entangle-ui'`
✨	AiSparklesIcon	`import { AiSparklesIcon } from 'entangle-ui'`

Curve Editor Tangents

Specialized icons for the CurveEditor component’s tangent handles:

Icon	Name	Import
—	TangentLinearIcon	`import { TangentLinearIcon } from 'entangle-ui'`
~	TangentAutoIcon	`import { TangentAutoIcon } from 'entangle-ui'`
∿	TangentFreeIcon	`import { TangentFreeIcon } from 'entangle-ui'`
≈	TangentAlignedIcon	`import { TangentAlignedIcon } from 'entangle-ui'`
⊼	TangentMirroredIcon	`import { TangentMirroredIcon } from 'entangle-ui'`
⌐	TangentStepIcon	`import { TangentStepIcon } from 'entangle-ui'`

Creating Custom Icons

All icons use the Icon wrapper component. To create a custom icon:

import { Icon } from 'entangle-ui';
import type { IconProps } from 'entangle-ui';

export const MyCustomIcon = (props: Omit<IconProps, 'children'>) => (
  <Icon {...props}>
    <path d="M12 2L2 22h20L12 2z" />
  </Icon>
);

The Icon component renders an SVG element with:

viewBox="0 0 24 24" coordinate system
stroke="currentColor" for color inheritance
fill="none" and strokeLinecap="round" defaults
Theme-aware sizing via the size prop