Swatch icon - Free SVG for React, Vue, Svelte, Angular, Solid & Preact - Customizable interface vector icon

Install with shadcn CLI

npx shadcn@latest add https://www.shadcn.io/registry/heroicons-swatch.json
npx shadcn@latest add https://www.shadcn.io/registry/heroicons-swatch.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/heroicons-swatch.json
bunx shadcn@latest add https://www.shadcn.io/registry/heroicons-swatch.json
Category:interface
Tags:swatchcolorpalettethemepickercustomizationhue

The swatch icon represents color selection and palette management with its color sample design showing hue options.

This color symbol has become the universal indicator for color pickers, theme customization, palette selection, and color management across all modern design tools and theme systems.

Frequently Asked Questions

Common questions about the Swatch icon

Similar Icons

Book Open - interface icon from HeroIcons
book open
Link 20 Solid - actions icon from HeroIcons
link 20 solid
Clipboard 20 Solid - actions icon from HeroIcons
clipboard 20 solid
Hand Thumb Down - communication icon from HeroIcons
hand thumb down
Bell Alert 16 Solid - communication icon from HeroIcons
bell alert 16 solid
Arrow Left Solid - navigation icon from HeroIcons
arrow left solid
Ticket Solid - interface icon from HeroIcons
ticket solid
Document Magnifying Glass 16 Solid - actions icon from HeroIcons
document magnifying glass 16 solid
Arrow Down 20 Solid - navigation icon from HeroIcons
arrow down 20 solid