Gentleface › Design › paint-bucket

paint-bucket icon

Paint bucket: fill, fill color, paint bucket, bucket fill. 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="M3.146 1.854C3.047 1.754 2.997 1.636 2.997 1.5C2.997 1.364 3.047 1.246 3.146 1.146C3.244 1.049 3.362 1 3.5 1C3.638 1 3.756 1.049 3.854 1.146L6.535 3.828C6.711 4.004 6.711 4.289 6.535 4.465L6.465 4.535C6.431 4.569 6.393 4.597 6.35 4.618C6.359 4.62 6.367 4.623 6.375 4.625C6.416 4.623 6.458 4.621 6.5 4.621C6.776 4.621 7.041 4.676 7.294 4.786C7.528 4.887 7.734 5.027 7.914 5.207L10.793 8.086C10.973 8.266 11.113 8.472 11.214 8.706C11.324 8.959 11.379 9.224 11.379 9.5C11.379 9.776 11.324 10.041 11.214 10.294C11.113 10.528 10.973 10.734 10.793 10.914L7.914 13.793C7.734 13.973 7.528 14.113 7.294 14.214C7.041 14.324 6.776 14.379 6.5 14.379C6.224 14.379 5.959 14.324 5.706 14.214C5.472 14.113 5.266 13.973 5.086 13.793L2.207 10.914C2.027 10.734 1.887 10.528 1.786 10.294C1.676 10.041 1.621 9.776 1.621 9.5C1.621 9.224 1.676 8.959 1.786 8.706C1.887 8.472 2.027 8.266 2.207 8.086L5.086 5.207C5.266 5.027 5.472 4.887 5.706 4.786C5.796 4.747 5.888 4.714 5.982 4.689C6 4.676 6.02 4.664 6.04 4.654C5.96 4.635 5.886 4.594 5.828 4.535L3.146 1.854ZM10 9L7.737 6.737C7.58 6.58 7.399 6.457 7.195 6.369C6.973 6.273 6.742 6.225 6.5 6.225C6.258 6.225 6.027 6.273 5.805 6.369C5.601 6.457 5.42 6.58 5.263 6.737L3 9L10 9ZM13.205 11.321C13.392 11.158 13.677 11.178 13.84 11.365C13.976 11.523 14.113 11.693 14.25 11.875C14.469 12.167 14.641 12.438 14.766 12.688C14.922 13 15 13.271 15 13.5C15 13.914 14.854 14.268 14.561 14.561C14.268 14.854 13.914 15 13.5 15C13.086 15 12.732 14.854 12.439 14.561C12.146 14.268 12 13.914 12 13.5C12 13.271 12.078 13 12.234 12.688C12.359 12.438 12.531 12.167 12.75 11.875C12.887 11.693 13.024 11.523 13.16 11.365C13.174 11.349 13.189 11.335 13.205 11.321Z"/></svg>

React

// Gentleface "paint-bucket" (line-round), MIT. https://gentleface.com/icons/paint-bucket
import type { SVGProps } from 'react';

export function PaintBucketIcon(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="M3.146 1.854C3.047 1.754 2.997 1.636 2.997 1.5C2.997 1.364 3.047 1.246 3.146 1.146C3.244 1.049 3.362 1 3.5 1C3.638 1 3.756 1.049 3.854 1.146L6.535 3.828C6.711 4.004 6.711 4.289 6.535 4.465L6.465 4.535C6.431 4.569 6.393 4.597 6.35 4.618C6.359 4.62 6.367 4.623 6.375 4.625C6.416 4.623 6.458 4.621 6.5 4.621C6.776 4.621 7.041 4.676 7.294 4.786C7.528 4.887 7.734 5.027 7.914 5.207L10.793 8.086C10.973 8.266 11.113 8.472 11.214 8.706C11.324 8.959 11.379 9.224 11.379 9.5C11.379 9.776 11.324 10.041 11.214 10.294C11.113 10.528 10.973 10.734 10.793 10.914L7.914 13.793C7.734 13.973 7.528 14.113 7.294 14.214C7.041 14.324 6.776 14.379 6.5 14.379C6.224 14.379 5.959 14.324 5.706 14.214C5.472 14.113 5.266 13.973 5.086 13.793L2.207 10.914C2.027 10.734 1.887 10.528 1.786 10.294C1.676 10.041 1.621 9.776 1.621 9.5C1.621 9.224 1.676 8.959 1.786 8.706C1.887 8.472 2.027 8.266 2.207 8.086L5.086 5.207C5.266 5.027 5.472 4.887 5.706 4.786C5.796 4.747 5.888 4.714 5.982 4.689C6 4.676 6.02 4.664 6.04 4.654C5.96 4.635 5.886 4.594 5.828 4.535L3.146 1.854ZM10 9L7.737 6.737C7.58 6.58 7.399 6.457 7.195 6.369C6.973 6.273 6.742 6.225 6.5 6.225C6.258 6.225 6.027 6.273 5.805 6.369C5.601 6.457 5.42 6.58 5.263 6.737L3 9L10 9ZM13.205 11.321C13.392 11.158 13.677 11.178 13.84 11.365C13.976 11.523 14.113 11.693 14.25 11.875C14.469 12.167 14.641 12.438 14.766 12.688C14.922 13 15 13.271 15 13.5C15 13.914 14.854 14.268 14.561 14.561C14.268 14.854 13.914 15 13.5 15C13.086 15 12.732 14.854 12.439 14.561C12.146 14.268 12 13.914 12 13.5C12 13.271 12.078 13 12.234 12.688C12.359 12.438 12.531 12.167 12.75 11.875C12.887 11.693 13.024 11.523 13.16 11.365C13.174 11.349 13.189 11.335 13.205 11.321Z" />
    </svg>
  );
}

Vue

Vue: see /icons/paint-bucket.md

Svelte

Svelte: see /icons/paint-bucket.md

HTML img

HTML img: see /icons/paint-bucket.md

CSS

CSS: see /icons/paint-bucket.md

Data URL

Data URL: see /icons/paint-bucket.md

Sprite

Sprite: see /icons/paint-bucket.md

SwiftUI

SwiftUI: see /icons/paint-bucket.md

Compose

Compose: see /icons/paint-bucket.md

Android XML

Android XML: see /icons/paint-bucket.md

Flutter

Flutter: see /icons/paint-bucket.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

fill, fill color, paint bucket, bucket fill

Alternatives

gradient: a gradient fill
line-color: the stroke or outline color
highlighter: the highlight color behind text

Also fits

gradient: a solid fill
line color: the fill color
paint: fill an area with one color
color: the fill color
bucket: the fill tool in a drawing app

Tags

paint, bucket, fill, color, colour, pour, flood-fill

Category

Design

Component name

PaintBucketIcon

History

2026-10-15 added

More design icons

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 angle animation animation-off bezier-curve boolean-exclude boolean-intersect boolean-union bounding-box · all design icons

For agents

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

paint-bucket icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More design icons

For agents

paint-bucket icon