Paint Bucket icon
Used in recoloring content. The Paint Bucket icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Paint Bucket icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { PaintBucket24Regular, PaintBucket24Filled } from "@fluentui/react-icons";
export function Example() {
return <PaintBucket24Regular aria-label="Paint Bucket" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_paint_bucket_24_regular.svg" width="24" height="24" alt="Paint Bucket"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.25C12 1.83579 11.6642 1.5 11.25 1.5C10.8358 1.5 10.5 1.83579 10.5 2.25V3.49946C10.1929 3.60776 9.90465 3.78472 9.65903 4.03035L2.78035 10.909C1.90167 11.7877 1.90167 13.2123 2.78035 14.091L7.65903 18.9697C8.53771 19.8484 9.96233 19.8484 10.841 18.9697L17.7197 12.091C18.5984 11.2123 18.5984 9.78771 17.7197 8.90903L12.841 4.03035C12.5954 3.78473 12.3071 3.60777 12 3.49947V2.25ZM3.84101 11.9697L10.5 5.31067V6.75C10.5 7.16421 10.8358 7.5 11.25 7.5C11.6642 7.5 12 7.16421 12 6.75V5.31069L16.659 9.96969C16.9519 10.2626 16.9519 10.7375 16.659 11.0303L15.6894 12H3.81231C3.82154 11.9897 3.83111 11.9796 3.84101 11.9697ZM4.31066 13.5H14.1894L9.78035 17.909C9.48745 18.2019 9.01258 18.2019 8.71969 17.909L4.31066 13.5ZM19.5212 13.6022C19.1922 12.9853 18.3079 12.9853 17.9788 13.6022L15.9706 17.3677C14.8516 19.4659 16.372 22 18.75 22C21.128 22 22.6485 19.4659 21.5294 17.3677L19.5212 13.6022ZM17.2941 18.0735L18.75 15.3438L20.2059 18.0735C20.7921 19.1726 19.9956 20.5 18.75 20.5C17.5044 20.5 16.708 19.1726 17.2941 18.0735Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/paint_bucket_24_regular.svg";Details
| Name | Paint Bucket |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_paint_bucket_24_regular.svg |
| Filled file | ic_fluent_paint_bucket_24_filled.svg |
| React components | PaintBucket24Regular, PaintBucket24Filled |
| License | MIT (© Microsoft Corporation) |