Swatch Solid 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-solid.json
npx shadcn@latest add https://www.shadcn.io/registry/heroicons-swatch-solid.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/heroicons-swatch-solid.json
bunx shadcn@latest add https://www.shadcn.io/registry/heroicons-swatch-solid.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 Solid icon

Similar Icons

Check Solid - interface icon from HeroIcons
check solid
Strikethrough 16 Solid - typography icon from HeroIcons
strikethrough 16 solid
Star 16 Solid - interface icon from HeroIcons
star 16 solid
Cloud Arrow Down - actions icon from HeroIcons
cloud arrow down
Puzzle Piece 20 Solid - system icon from HeroIcons
puzzle piece 20 solid
Arrow Down - navigation icon from HeroIcons
arrow down
Arrow Left - navigation icon from HeroIcons
arrow left
Arrow Path - actions icon from HeroIcons
arrow path
Phone 20 Solid - communication icon from HeroIcons
phone 20 solid