# paint-roller icon Paint roller. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/paint-roller - Category: Design - Use it for: paint roller, paint, painting - Tags: paint, roller, paint-roller, wall, decorate, color, fill, format-painter - Component name: PaintRollerIcon - Added: 2026-10-15 ## Alternatives - `brush`: the brush tool in a drawing app - `paint-bucket`: fill an area with one color ## Also fits - brush: Google Docs' paint-format convention ## 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/paint-roller.svg · PNG https://gentleface.com/png/line-round/16/paint-roller.png · https://gentleface.com/png/line-round/32/paint-roller.png · https://gentleface.com/png/line-round/48/paint-roller.png - line-soft: https://gentleface.com/svg/line-soft/16/paint-roller.svg · PNG https://gentleface.com/png/line-soft/16/paint-roller.png · https://gentleface.com/png/line-soft/32/paint-roller.png · https://gentleface.com/png/line-soft/48/paint-roller.png - line-sharp: https://gentleface.com/svg/line-sharp/16/paint-roller.svg · PNG https://gentleface.com/png/line-sharp/16/paint-roller.png · https://gentleface.com/png/line-sharp/32/paint-roller.png · https://gentleface.com/png/line-sharp/48/paint-roller.png - solid-round: https://gentleface.com/svg/solid-round/16/paint-roller.svg · PNG https://gentleface.com/png/solid-round/16/paint-roller.png · https://gentleface.com/png/solid-round/32/paint-roller.png · https://gentleface.com/png/solid-round/48/paint-roller.png - solid-soft: https://gentleface.com/svg/solid-soft/16/paint-roller.svg · PNG https://gentleface.com/png/solid-soft/16/paint-roller.png · https://gentleface.com/png/solid-soft/32/paint-roller.png · https://gentleface.com/png/solid-soft/48/paint-roller.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/paint-roller.svg · PNG https://gentleface.com/png/solid-sharp/16/paint-roller.png · https://gentleface.com/png/solid-sharp/32/paint-roller.png · https://gentleface.com/png/solid-sharp/48/paint-roller.png The SVG of every style: https://gentleface.com/icons/paint-roller.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 "paint-roller" (line-round), MIT. https://gentleface.com/icons/paint-roller import type { SVGProps } from 'react'; export function PaintRollerIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "paint-roller" (line-round), MIT. https://gentleface.com/icons/paint-roller. Takes the text color. */ .icon-paint-roller { 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='M12.707 1.293C12.902 1.488 13 1.724 13 2L13 3L14 3C14.276 3 14.512 3.098 14.707 3.293C14.902 3.488 15 3.724 15 4L15 8C15 8.276 14.902 8.512 14.707 8.707C14.512 8.902 14.276 9 14 9L8 9L8 11L8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5L9 14.5C9 14.641 8.952 14.759 8.856 14.856C8.759 14.952 8.641 15 8.5 15L6.5 15C6.359 15 6.241 14.952 6.144 14.856C6.048 14.759 6 14.641 6 14.5L6 11.5C6 11.359 6.048 11.241 6.144 11.144C6.241 11.048 6.359 11 6.5 11L7 11L7 9C7 8.724 7.098 8.488 7.293 8.293C7.488 8.098 7.724 8 8 8L14 8L14 4L13 4L13 5C13 5.276 12.902 5.512 12.707 5.707C12.512 5.902 12.276 6 12 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L12 1C12.276 1 12.512 1.098 12.707 1.293ZM2 5L12 5L12 2L2 2L2 5ZM7 12L7 14L8 14L8 12L7 12Z'/%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='M12.707 1.293C12.902 1.488 13 1.724 13 2L13 3L14 3C14.276 3 14.512 3.098 14.707 3.293C14.902 3.488 15 3.724 15 4L15 8C15 8.276 14.902 8.512 14.707 8.707C14.512 8.902 14.276 9 14 9L8 9L8 11L8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5L9 14.5C9 14.641 8.952 14.759 8.856 14.856C8.759 14.952 8.641 15 8.5 15L6.5 15C6.359 15 6.241 14.952 6.144 14.856C6.048 14.759 6 14.641 6 14.5L6 11.5C6 11.359 6.048 11.241 6.144 11.144C6.241 11.048 6.359 11 6.5 11L7 11L7 9C7 8.724 7.098 8.488 7.293 8.293C7.488 8.098 7.724 8 8 8L14 8L14 4L13 4L13 5C13 5.276 12.902 5.512 12.707 5.707C12.512 5.902 12.276 6 12 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L12 1C12.276 1 12.512 1.098 12.707 1.293ZM2 5L12 5L12 2L2 2L2 5ZM7 12L7 14L8 14L8 12L7 12Z'/%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='M12.707 1.293C12.902 1.488 13 1.724 13 2L13 3L14 3C14.276 3 14.512 3.098 14.707 3.293C14.902 3.488 15 3.724 15 4L15 8C15 8.276 14.902 8.512 14.707 8.707C14.512 8.902 14.276 9 14 9L8 9L8 11L8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5L9 14.5C9 14.641 8.952 14.759 8.856 14.856C8.759 14.952 8.641 15 8.5 15L6.5 15C6.359 15 6.241 14.952 6.144 14.856C6.048 14.759 6 14.641 6 14.5L6 11.5C6 11.359 6.048 11.241 6.144 11.144C6.241 11.048 6.359 11 6.5 11L7 11L7 9C7 8.724 7.098 8.488 7.293 8.293C7.488 8.098 7.724 8 8 8L14 8L14 4L13 4L13 5C13 5.276 12.902 5.512 12.707 5.707C12.512 5.902 12.276 6 12 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L12 1C12.276 1 12.512 1.098 12.707 1.293ZM2 5L12 5L12 2L2 2L2 5ZM7 12L7 14L8 14L8 12L7 12Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "paint-roller" (line-round), MIT. https://gentleface.com/icons/paint-roller import SwiftUI struct PaintRollerIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 12.707, y: 1.293)) p.addCurve(to: CGPoint(x: 13, y: 2), control1: CGPoint(x: 12.902, y: 1.488), control2: CGPoint(x: 13, y: 1.724)) p.addLine(to: CGPoint(x: 13, y: 3)) p.addLine(to: CGPoint(x: 14, y: 3)) p.addCurve(to: CGPoint(x: 14.707, y: 3.293), control1: CGPoint(x: 14.276, y: 3), control2: CGPoint(x: 14.512, y: 3.098)) p.addCurve(to: CGPoint(x: 15, y: 4), control1: CGPoint(x: 14.902, y: 3.488), control2: CGPoint(x: 15, y: 3.724)) p.addLine(to: CGPoint(x: 15, y: 8)) p.addCurve(to: CGPoint(x: 14.707, y: 8.707), control1: CGPoint(x: 15, y: 8.276), control2: CGPoint(x: 14.902, y: 8.512)) p.addCurve(to: CGPoint(x: 14, y: 9), control1: CGPoint(x: 14.512, y: 8.902), control2: CGPoint(x: 14.276, y: 9)) p.addLine(to: CGPoint(x: 8, y: 9)) p.addLine(to: CGPoint(x: 8, y: 11)) p.addLine(to: CGPoint(x: 8.5, y: 11)) p.addCurve(to: CGPoint(x: 8.856, y: 11.144), control1: CGPoint(x: 8.641, y: 11), control2: CGPoint(x: 8.759, y: 11.048)) p.addCurve(to: CGPoint(x: 9, y: 11.5), control1: CGPoint(x: 8.952, y: 11.241), control2: CGPoint(x: 9, y: 11.359)) p.addLine(to: CGPoint(x: 9, y: 14.5)) p.addCurve(to: CGPoint(x: 8.856, y: 14.856), control1: CGPoint(x: 9, y: 14.641), control2: CGPoint(x: 8.952, y: 14.759)) p.addCurve(to: CGPoint(x: 8.5, y: 15), control1: CGPoint(x: 8.759, y: 14.952), control2: CGPoint(x: 8.641, y: 15)) p.addLine(to: CGPoint(x: 6.5, y: 15)) p.addCurve(to: CGPoint(x: 6.144, y: 14.856), control1: CGPoint(x: 6.359, y: 15), control2: CGPoint(x: 6.241, y: 14.952)) p.addCurve(to: CGPoint(x: 6, y: 14.5), control1: CGPoint(x: 6.048, y: 14.759), control2: CGPoint(x: 6, y: 14.641)) p.addLine(to: CGPoint(x: 6, y: 11.5)) p.addCurve(to: CGPoint(x: 6.144, y: 11.144), control1: CGPoint(x: 6, y: 11.359), control2: CGPoint(x: 6.048, y: 11.241)) p.addCurve(to: CGPoint(x: 6.5, y: 11), control1: CGPoint(x: 6.241, y: 11.048), control2: CGPoint(x: 6.359, y: 11)) p.addLine(to: CGPoint(x: 7, y: 11)) p.addLine(to: CGPoint(x: 7, y: 9)) p.addCurve(to: CGPoint(x: 7.293, y: 8.293), control1: CGPoint(x: 7, y: 8.724), control2: CGPoint(x: 7.098, y: 8.488)) p.addCurve(to: CGPoint(x: 8, y: 8), control1: CGPoint(x: 7.488, y: 8.098), control2: CGPoint(x: 7.724, y: 8)) p.addLine(to: CGPoint(x: 14, y: 8)) p.addLine(to: CGPoint(x: 14, y: 4)) p.addLine(to: CGPoint(x: 13, y: 4)) p.addLine(to: CGPoint(x: 13, y: 5)) p.addCurve(to: CGPoint(x: 12.707, y: 5.707), control1: CGPoint(x: 13, y: 5.276), control2: CGPoint(x: 12.902, y: 5.512)) p.addCurve(to: CGPoint(x: 12, y: 6), control1: CGPoint(x: 12.512, y: 5.902), control2: CGPoint(x: 12.276, y: 6)) p.addLine(to: CGPoint(x: 2, y: 6)) p.addCurve(to: CGPoint(x: 1.293, y: 5.707), control1: CGPoint(x: 1.724, y: 6), control2: CGPoint(x: 1.488, y: 5.902)) p.addCurve(to: CGPoint(x: 1, y: 5), control1: CGPoint(x: 1.098, y: 5.512), control2: CGPoint(x: 1, y: 5.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: 12, y: 1)) p.addCurve(to: CGPoint(x: 12.707, y: 1.293), control1: CGPoint(x: 12.276, y: 1), control2: CGPoint(x: 12.512, y: 1.098)) p.closeSubpath() p.move(to: CGPoint(x: 2, y: 5)) p.addLine(to: CGPoint(x: 12, y: 5)) p.addLine(to: CGPoint(x: 12, y: 2)) p.addLine(to: CGPoint(x: 2, y: 2)) p.addLine(to: CGPoint(x: 2, y: 5)) p.closeSubpath() p.move(to: CGPoint(x: 7, y: 12)) p.addLine(to: CGPoint(x: 7, y: 14)) p.addLine(to: CGPoint(x: 8, y: 14)) p.addLine(to: CGPoint(x: 8, y: 12)) p.addLine(to: CGPoint(x: 7, y: 12)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // PaintRollerIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "paint-roller" (line-round), MIT. https://gentleface.com/icons/paint-roller 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 PaintRollerIcon: ImageVector by lazy { ImageVector.Builder( name = "paint-roller", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M12.707 1.293C12.902 1.488 13 1.724 13 2L13 3L14 3C14.276 3 14.512 3.098 14.707 3.293C14.902 3.488 15 3.724 15 4L15 8C15 8.276 14.902 8.512 14.707 8.707C14.512 8.902 14.276 9 14 9L8 9L8 11L8.5 11C8.641 11 8.759 11.048 8.856 11.144C8.952 11.241 9 11.359 9 11.5L9 14.5C9 14.641 8.952 14.759 8.856 14.856C8.759 14.952 8.641 15 8.5 15L6.5 15C6.359 15 6.241 14.952 6.144 14.856C6.048 14.759 6 14.641 6 14.5L6 11.5C6 11.359 6.048 11.241 6.144 11.144C6.241 11.048 6.359 11 6.5 11L7 11L7 9C7 8.724 7.098 8.488 7.293 8.293C7.488 8.098 7.724 8 8 8L14 8L14 4L13 4L13 5C13 5.276 12.902 5.512 12.707 5.707C12.512 5.902 12.276 6 12 6L2 6C1.724 6 1.488 5.902 1.293 5.707C1.098 5.512 1 5.276 1 5L1 2C1 1.724 1.098 1.488 1.293 1.293C1.488 1.098 1.724 1 2 1L12 1C12.276 1 12.512 1.098 12.707 1.293ZM2 5L12 5L12 2L2 2L2 5ZM7 12L7 14L8 14L8 12L7 12Z"), fill = SolidColor(Color.Black), ).build() } // Icon(PaintRollerIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "paint-roller" (line-round), MIT. https://gentleface.com/icons/paint-roller import 'package:flutter/widgets.dart'; class PaintRollerIcon extends StatelessWidget { const PaintRollerIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _PaintRollerIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _PaintRollerIconPainter extends CustomPainter { _PaintRollerIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(12.707, 1.293) ..cubicTo(12.902, 1.488, 13, 1.724, 13, 2) ..lineTo(13, 3) ..lineTo(14, 3) ..cubicTo(14.276, 3, 14.512, 3.098, 14.707, 3.293) ..cubicTo(14.902, 3.488, 15, 3.724, 15, 4) ..lineTo(15, 8) ..cubicTo(15, 8.276, 14.902, 8.512, 14.707, 8.707) ..cubicTo(14.512, 8.902, 14.276, 9, 14, 9) ..lineTo(8, 9) ..lineTo(8, 11) ..lineTo(8.5, 11) ..cubicTo(8.641, 11, 8.759, 11.048, 8.856, 11.144) ..cubicTo(8.952, 11.241, 9, 11.359, 9, 11.5) ..lineTo(9, 14.5) ..cubicTo(9, 14.641, 8.952, 14.759, 8.856, 14.856) ..cubicTo(8.759, 14.952, 8.641, 15, 8.5, 15) ..lineTo(6.5, 15) ..cubicTo(6.359, 15, 6.241, 14.952, 6.144, 14.856) ..cubicTo(6.048, 14.759, 6, 14.641, 6, 14.5) ..lineTo(6, 11.5) ..cubicTo(6, 11.359, 6.048, 11.241, 6.144, 11.144) ..cubicTo(6.241, 11.048, 6.359, 11, 6.5, 11) ..lineTo(7, 11) ..lineTo(7, 9) ..cubicTo(7, 8.724, 7.098, 8.488, 7.293, 8.293) ..cubicTo(7.488, 8.098, 7.724, 8, 8, 8) ..lineTo(14, 8) ..lineTo(14, 4) ..lineTo(13, 4) ..lineTo(13, 5) ..cubicTo(13, 5.276, 12.902, 5.512, 12.707, 5.707) ..cubicTo(12.512, 5.902, 12.276, 6, 12, 6) ..lineTo(2, 6) ..cubicTo(1.724, 6, 1.488, 5.902, 1.293, 5.707) ..cubicTo(1.098, 5.512, 1, 5.276, 1, 5) ..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(12, 1) ..cubicTo(12.276, 1, 12.512, 1.098, 12.707, 1.293) ..close() ..moveTo(2, 5) ..lineTo(12, 5) ..lineTo(12, 2) ..lineTo(2, 2) ..lineTo(2, 5) ..close() ..moveTo(7, 12) ..lineTo(7, 14) ..lineTo(8, 14) ..lineTo(8, 12) ..lineTo(7, 12) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_PaintRollerIconPainter old) => old.color != color; } ```