# swatch-book icon Swatch book. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/swatch-book - Category: Design - Use it for: swatches, color swatches, swatch - Tags: swatches, swatch, swatch book, color swatches, colour swatches, color guide, paint chips, color samples, palette, theme, color, colour, figma, design tool, ui design - Component name: SwatchBookIcon - Added: 2026-10-19 ## Alternatives - `palette`: color in general or a color palette ## Also fits - palette: a collection of named swatches ## Files 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. - line-round: https://gentleface.com/svg/line-round/16/swatch-book.svg · PNG https://gentleface.com/png/line-round/16/swatch-book.png · https://gentleface.com/png/line-round/32/swatch-book.png · https://gentleface.com/png/line-round/48/swatch-book.png - line-soft: https://gentleface.com/svg/line-soft/16/swatch-book.svg · PNG https://gentleface.com/png/line-soft/16/swatch-book.png · https://gentleface.com/png/line-soft/32/swatch-book.png · https://gentleface.com/png/line-soft/48/swatch-book.png - line-sharp: https://gentleface.com/svg/line-sharp/16/swatch-book.svg · PNG https://gentleface.com/png/line-sharp/16/swatch-book.png · https://gentleface.com/png/line-sharp/32/swatch-book.png · https://gentleface.com/png/line-sharp/48/swatch-book.png - solid-round: https://gentleface.com/svg/solid-round/16/swatch-book.svg · PNG https://gentleface.com/png/solid-round/16/swatch-book.png · https://gentleface.com/png/solid-round/32/swatch-book.png · https://gentleface.com/png/solid-round/48/swatch-book.png - solid-soft: https://gentleface.com/svg/solid-soft/16/swatch-book.svg · PNG https://gentleface.com/png/solid-soft/16/swatch-book.png · https://gentleface.com/png/solid-soft/32/swatch-book.png · https://gentleface.com/png/solid-soft/48/swatch-book.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/swatch-book.svg · PNG https://gentleface.com/png/solid-sharp/16/swatch-book.png · https://gentleface.com/png/solid-sharp/32/swatch-book.png · https://gentleface.com/png/solid-sharp/48/swatch-book.png The SVG of every style: https://gentleface.com/icons/swatch-book.json (`svg`). ## Code (line-round) 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. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "swatch-book" (line-round), MIT. https://gentleface.com/icons/swatch-book import type { SVGProps } from 'react'; export function SwatchBookIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "swatch-book" (line-round), MIT. https://gentleface.com/icons/swatch-book. Takes the text color. */ .icon-swatch-book { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "swatch-book" (line-round), MIT. https://gentleface.com/icons/swatch-book import SwiftUI struct SwatchBookIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 8.829, y: 1.724)) p.addCurve(to: CGPoint(x: 9.407, y: 1.222), control1: CGPoint(x: 8.953, y: 1.477), control2: CGPoint(x: 9.145, y: 1.309)) p.addCurve(to: CGPoint(x: 10.171, y: 1.276), control1: CGPoint(x: 9.669, y: 1.135), control2: CGPoint(x: 9.924, y: 1.153)) p.addLine(to: CGPoint(x: 13.276, y: 2.829)) p.addCurve(to: CGPoint(x: 13.778, y: 3.407), control1: CGPoint(x: 13.523, y: 2.953), control2: CGPoint(x: 13.691, y: 3.145)) p.addCurve(to: CGPoint(x: 13.724, y: 4.171), control1: CGPoint(x: 13.865, y: 3.669), control2: CGPoint(x: 13.847, y: 3.924)) p.addLine(to: CGPoint(x: 11.309, y: 9)) p.addLine(to: CGPoint(x: 14, y: 9)) p.addCurve(to: CGPoint(x: 14.707, y: 9.293), control1: CGPoint(x: 14.276, y: 9), control2: CGPoint(x: 14.512, y: 9.098)) p.addCurve(to: CGPoint(x: 15, y: 10), control1: CGPoint(x: 14.902, y: 9.488), control2: CGPoint(x: 15, y: 9.724)) p.addLine(to: CGPoint(x: 15, y: 14)) p.addCurve(to: CGPoint(x: 14.707, y: 14.707), control1: CGPoint(x: 15, y: 14.276), control2: CGPoint(x: 14.902, y: 14.512)) p.addCurve(to: CGPoint(x: 14, y: 15), control1: CGPoint(x: 14.512, y: 14.902), control2: CGPoint(x: 14.276, y: 15)) p.addLine(to: CGPoint(x: 6.818, y: 15)) p.addCurve(to: CGPoint(x: 6.5, y: 14.869), control1: CGPoint(x: 6.699, y: 15), control2: CGPoint(x: 6.584, y: 14.953)) p.addCurve(to: CGPoint(x: 6, y: 15), control1: CGPoint(x: 6.351, y: 14.956), control2: CGPoint(x: 6.185, y: 15)) p.addLine(to: CGPoint(x: 2, y: 15)) p.addCurve(to: CGPoint(x: 1.293, y: 14.707), control1: CGPoint(x: 1.724, y: 15), control2: CGPoint(x: 1.488, y: 14.902)) p.addCurve(to: CGPoint(x: 1, y: 14), control1: CGPoint(x: 1.098, y: 14.512), control2: CGPoint(x: 1, y: 14.276)) p.addLine(to: CGPoint(x: 1, y: 2)) p.addCurve(to: CGPoint(x: 1.293, y: 1.293), control1: CGPoint(x: 1, y: 1.724), control2: CGPoint(x: 1.098, y: 1.488)) p.addCurve(to: CGPoint(x: 2, y: 1), control1: CGPoint(x: 1.488, y: 1.098), control2: CGPoint(x: 1.724, y: 1)) p.addLine(to: CGPoint(x: 6, y: 1)) p.addCurve(to: CGPoint(x: 6.707, y: 1.293), control1: CGPoint(x: 6.276, y: 1), control2: CGPoint(x: 6.512, y: 1.098)) p.addCurve(to: CGPoint(x: 7, y: 2), control1: CGPoint(x: 6.902, y: 1.488), control2: CGPoint(x: 7, y: 1.724)) p.addLine(to: CGPoint(x: 7, y: 5.382)) p.addLine(to: CGPoint(x: 8.829, y: 1.724)) p.closeSubpath() p.move(to: CGPoint(x: 6, y: 14)) p.addLine(to: CGPoint(x: 6, y: 2)) p.addLine(to: CGPoint(x: 2, y: 2)) p.addLine(to: CGPoint(x: 2, y: 14)) p.addLine(to: CGPoint(x: 6, y: 14)) p.closeSubpath() p.move(to: CGPoint(x: 10.309, y: 9)) p.addLine(to: CGPoint(x: 10.309, y: 9)) p.addCurve(to: CGPoint(x: 10.415, y: 8.553), control1: CGPoint(x: 10.309, y: 8.843), control2: CGPoint(x: 10.344, y: 8.694)) p.addLine(to: CGPoint(x: 12.829, y: 3.724)) p.addLine(to: CGPoint(x: 9.724, y: 2.171)) p.addLine(to: CGPoint(x: 7, y: 7.618)) p.addLine(to: CGPoint(x: 7, y: 9)) p.addLine(to: CGPoint(x: 10.072, y: 9)) p.addCurve(to: CGPoint(x: 10.287, y: 9.055), control1: CGPoint(x: 10.147, y: 9), control2: CGPoint(x: 10.221, y: 9.019)) p.addCurve(to: CGPoint(x: 10.309, y: 9), control1: CGPoint(x: 10.293, y: 9.036), control2: CGPoint(x: 10.301, y: 9.018)) p.closeSubpath() p.move(to: CGPoint(x: 10.052, y: 10)) p.addLine(to: CGPoint(x: 7, y: 10)) p.addLine(to: CGPoint(x: 7, y: 14)) p.addLine(to: CGPoint(x: 14, y: 14)) p.addLine(to: CGPoint(x: 14, y: 10)) p.addLine(to: CGPoint(x: 11.309, y: 10)) p.addCurve(to: CGPoint(x: 10.853, y: 9.89), control1: CGPoint(x: 11.148, y: 10), control2: CGPoint(x: 10.996, y: 9.963)) p.addCurve(to: CGPoint(x: 10.5, y: 9.588), control1: CGPoint(x: 10.71, y: 9.817), control2: CGPoint(x: 10.592, y: 9.716)) p.addCurve(to: CGPoint(x: 10.052, y: 10), control1: CGPoint(x: 10.48, y: 9.821), control2: CGPoint(x: 10.285, y: 10)) p.closeSubpath() p.move(to: CGPoint(x: 4.707, y: 11.293)) p.addCurve(to: CGPoint(x: 5, y: 12), control1: CGPoint(x: 4.902, y: 11.488), control2: CGPoint(x: 5, y: 11.724)) p.addCurve(to: CGPoint(x: 4.707, y: 12.707), control1: CGPoint(x: 5, y: 12.276), control2: CGPoint(x: 4.902, y: 12.512)) p.addCurve(to: CGPoint(x: 4, y: 13), control1: CGPoint(x: 4.512, y: 12.902), control2: CGPoint(x: 4.276, y: 13)) p.addCurve(to: CGPoint(x: 3.293, y: 12.707), control1: CGPoint(x: 3.724, y: 13), control2: CGPoint(x: 3.488, y: 12.902)) p.addCurve(to: CGPoint(x: 3, y: 12), control1: CGPoint(x: 3.098, y: 12.512), control2: CGPoint(x: 3, y: 12.276)) p.addCurve(to: CGPoint(x: 3.293, y: 11.293), control1: CGPoint(x: 3, y: 11.724), control2: CGPoint(x: 3.098, y: 11.488)) p.addCurve(to: CGPoint(x: 4, y: 11), control1: CGPoint(x: 3.488, y: 11.098), control2: CGPoint(x: 3.724, y: 11)) p.addCurve(to: CGPoint(x: 4.707, y: 11.293), control1: CGPoint(x: 4.276, y: 11), control2: CGPoint(x: 4.512, y: 11.098)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // SwatchBookIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "swatch-book" (line-round), MIT. https://gentleface.com/icons/swatch-book import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val SwatchBookIcon: ImageVector by lazy { ImageVector.Builder( name = "swatch-book", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("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"), fill = SolidColor(Color.Black), ).build() } // Icon(SwatchBookIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "swatch-book" (line-round), MIT. https://gentleface.com/icons/swatch-book import 'package:flutter/widgets.dart'; class SwatchBookIcon extends StatelessWidget { const SwatchBookIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _SwatchBookIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _SwatchBookIconPainter extends CustomPainter { _SwatchBookIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(8.829, 1.724) ..cubicTo(8.953, 1.477, 9.145, 1.309, 9.407, 1.222) ..cubicTo(9.669, 1.135, 9.924, 1.153, 10.171, 1.276) ..lineTo(13.276, 2.829) ..cubicTo(13.523, 2.953, 13.691, 3.145, 13.778, 3.407) ..cubicTo(13.865, 3.669, 13.847, 3.924, 13.724, 4.171) ..lineTo(11.309, 9) ..lineTo(14, 9) ..cubicTo(14.276, 9, 14.512, 9.098, 14.707, 9.293) ..cubicTo(14.902, 9.488, 15, 9.724, 15, 10) ..lineTo(15, 14) ..cubicTo(15, 14.276, 14.902, 14.512, 14.707, 14.707) ..cubicTo(14.512, 14.902, 14.276, 15, 14, 15) ..lineTo(6.818, 15) ..cubicTo(6.699, 15, 6.584, 14.953, 6.5, 14.869) ..cubicTo(6.351, 14.956, 6.185, 15, 6, 15) ..lineTo(2, 15) ..cubicTo(1.724, 15, 1.488, 14.902, 1.293, 14.707) ..cubicTo(1.098, 14.512, 1, 14.276, 1, 14) ..lineTo(1, 2) ..cubicTo(1, 1.724, 1.098, 1.488, 1.293, 1.293) ..cubicTo(1.488, 1.098, 1.724, 1, 2, 1) ..lineTo(6, 1) ..cubicTo(6.276, 1, 6.512, 1.098, 6.707, 1.293) ..cubicTo(6.902, 1.488, 7, 1.724, 7, 2) ..lineTo(7, 5.382) ..lineTo(8.829, 1.724) ..close() ..moveTo(6, 14) ..lineTo(6, 2) ..lineTo(2, 2) ..lineTo(2, 14) ..lineTo(6, 14) ..close() ..moveTo(10.309, 9) ..lineTo(10.309, 9) ..cubicTo(10.309, 8.843, 10.344, 8.694, 10.415, 8.553) ..lineTo(12.829, 3.724) ..lineTo(9.724, 2.171) ..lineTo(7, 7.618) ..lineTo(7, 9) ..lineTo(10.072, 9) ..cubicTo(10.147, 9, 10.221, 9.019, 10.287, 9.055) ..cubicTo(10.293, 9.036, 10.301, 9.018, 10.309, 9) ..close() ..moveTo(10.052, 10) ..lineTo(7, 10) ..lineTo(7, 14) ..lineTo(14, 14) ..lineTo(14, 10) ..lineTo(11.309, 10) ..cubicTo(11.148, 10, 10.996, 9.963, 10.853, 9.89) ..cubicTo(10.71, 9.817, 10.592, 9.716, 10.5, 9.588) ..cubicTo(10.48, 9.821, 10.285, 10, 10.052, 10) ..close() ..moveTo(4.707, 11.293) ..cubicTo(4.902, 11.488, 5, 11.724, 5, 12) ..cubicTo(5, 12.276, 4.902, 12.512, 4.707, 12.707) ..cubicTo(4.512, 12.902, 4.276, 13, 4, 13) ..cubicTo(3.724, 13, 3.488, 12.902, 3.293, 12.707) ..cubicTo(3.098, 12.512, 3, 12.276, 3, 12) ..cubicTo(3, 11.724, 3.098, 11.488, 3.293, 11.293) ..cubicTo(3.488, 11.098, 3.724, 11, 4, 11) ..cubicTo(4.276, 11, 4.512, 11.098, 4.707, 11.293) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_SwatchBookIconPainter old) => old.color != color; } ```