gentleface

Gentleface › Design › paint-roller

paint-roller icon

Paint roller: paint roller, paint, painting. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

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="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"/></svg>
React
// Gentleface "paint-roller" (line-round), MIT. https://gentleface.com/icons/paint-roller
import type { SVGProps } from 'react';

export function PaintRollerIcon(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="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" />
    </svg>
  );
}
Vue
Vue: see /icons/paint-roller.md
Svelte
Svelte: see /icons/paint-roller.md
HTML img
HTML img: see /icons/paint-roller.md
CSS
CSS: see /icons/paint-roller.md
Data URL
Data URL: see /icons/paint-roller.md
Sprite
Sprite: see /icons/paint-roller.md
SwiftUI
SwiftUI: see /icons/paint-roller.md
Compose
Compose: see /icons/paint-roller.md
Android XML
Android XML: see /icons/paint-roller.md
Flutter
Flutter: see /icons/paint-roller.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
paint roller, paint, painting
Alternatives
Also fits
  • brush: Google Docs' paint-format convention
Tags
paint, roller, paint-roller, wall, decorate, color, fill, format-painter
Category
Design
Component name
PaintRollerIcon
History
  • added

More design icons

For agents

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

Feedback