gentleface

Gentleface › Design › swatch-book

swatch-book icon

Swatch book: swatches, color swatches, swatch. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

Code line-round

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8.829 1.724C8.953 1.477 9.145 1.309 9.407 1.222C9.669 1.135 9.924 1.153 10.171 1.276L13.276 2.829C13.523 2.953 13.691 3.145 13.778 3.407C13.865 3.669 13.847 3.924 13.724 4.171L11.309 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 14C15 14.276 14.902 14.512 14.707 14.707C14.512 14.902 14.276 15 14 15L6.818 15C6.699 15 6.584 14.953 6.5 14.869C6.351 14.956 6.185 15 6 15L2 15C1.724 15 1.488 14.902 1.293 14.707C1.098 14.512 1 14.276 1 14L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L6 1C6.276 1 6.512 1.098 6.707 1.293C6.902 1.488 7 1.724 7 2L7 5.382L8.829 1.724ZM6 14L6 2L2 2L2 14L6 14ZM10.309 9L10.309 9C10.309 8.843 10.344 8.694 10.415 8.553L12.829 3.724L9.724 2.171L7 7.618L7 9L10.072 9C10.147 9 10.221 9.019 10.287 9.055C10.293 9.036 10.301 9.018 10.309 9ZM10.052 10L7 10L7 14L14 14L14 10L11.309 10C11.148 10 10.996 9.963 10.853 9.89C10.71 9.817 10.592 9.716 10.5 9.588C10.48 9.821 10.285 10 10.052 10ZM4.707 11.293C4.902 11.488 5 11.724 5 12C5 12.276 4.902 12.512 4.707 12.707C4.512 12.902 4.276 13 4 13C3.724 13 3.488 12.902 3.293 12.707C3.098 12.512 3 12.276 3 12C3 11.724 3.098 11.488 3.293 11.293C3.488 11.098 3.724 11 4 11C4.276 11 4.512 11.098 4.707 11.293Z"/></svg>
React
// Gentleface "swatch-book" (line-round), MIT. https://gentleface.com/icons/swatch-book
import type { SVGProps } from 'react';

export function SwatchBookIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M8.829 1.724C8.953 1.477 9.145 1.309 9.407 1.222C9.669 1.135 9.924 1.153 10.171 1.276L13.276 2.829C13.523 2.953 13.691 3.145 13.778 3.407C13.865 3.669 13.847 3.924 13.724 4.171L11.309 9L14 9C14.276 9 14.512 9.098 14.707 9.293C14.902 9.488 15 9.724 15 10L15 14C15 14.276 14.902 14.512 14.707 14.707C14.512 14.902 14.276 15 14 15L6.818 15C6.699 15 6.584 14.953 6.5 14.869C6.351 14.956 6.185 15 6 15L2 15C1.724 15 1.488 14.902 1.293 14.707C1.098 14.512 1 14.276 1 14L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L6 1C6.276 1 6.512 1.098 6.707 1.293C6.902 1.488 7 1.724 7 2L7 5.382L8.829 1.724ZM6 14L6 2L2 2L2 14L6 14ZM10.309 9L10.309 9C10.309 8.843 10.344 8.694 10.415 8.553L12.829 3.724L9.724 2.171L7 7.618L7 9L10.072 9C10.147 9 10.221 9.019 10.287 9.055C10.293 9.036 10.301 9.018 10.309 9ZM10.052 10L7 10L7 14L14 14L14 10L11.309 10C11.148 10 10.996 9.963 10.853 9.89C10.71 9.817 10.592 9.716 10.5 9.588C10.48 9.821 10.285 10 10.052 10ZM4.707 11.293C4.902 11.488 5 11.724 5 12C5 12.276 4.902 12.512 4.707 12.707C4.512 12.902 4.276 13 4 13C3.724 13 3.488 12.902 3.293 12.707C3.098 12.512 3 12.276 3 12C3 11.724 3.098 11.488 3.293 11.293C3.488 11.098 3.724 11 4 11C4.276 11 4.512 11.098 4.707 11.293Z" />
    </svg>
  );
}
Vue
Vue: see /icons/swatch-book.md
Svelte
Svelte: see /icons/swatch-book.md
HTML img
HTML img: see /icons/swatch-book.md
CSS
CSS: see /icons/swatch-book.md
Data URL
Data URL: see /icons/swatch-book.md
Sprite
Sprite: see /icons/swatch-book.md
SwiftUI
SwiftUI: see /icons/swatch-book.md
Compose
Compose: see /icons/swatch-book.md
Android XML
Android XML: see /icons/swatch-book.md
Flutter
Flutter: see /icons/swatch-book.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for
swatches, color swatches, swatch
Alternatives
  • palette: color in general or a color palette
Also fits
  • palette: a collection of named swatches
Tags
swatches, swatch, swatch book, color swatches, colour swatches, color guide, paint chips, color samples, palette, theme, color, colour, figma, design tool, ui design
Category
Design
Component name
SwatchBookIcon
History
  • added

More design icons

align-horizontal-center align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three align-vertical-center angle animation animation-off auto-layout-horizontal auto-layout-vertical auto-layout-wrap · all design icons

For agents

Metadata: /icons/swatch-book.json · Markdown: /icons/swatch-book.md · SVG: https://gentleface.com/svg/{style}/16/swatch-book.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/swatch-book.png

Feedback