paint bucket icon

paint-bucket-16-regular from Fluent UI System Icons by Microsoft Corporation · 16 Regular · MIT Free for personal and commercial use.

Name: paint-bucket-16-regular
Set: Fluent UI System Icons
Style: 16 Regular
Viewbox: 16×16
License: MIT

5 other variants in Fluent UI System Icons

paint-bucket-16-filled paint-bucket-20-filled paint-bucket-20-regular paint-bucket-24-filled paint-bucket-24-regular

The same icon in other sets

paint-bucketBootstrap Icons paint-bucketHuge Icons paint-bucketLucide paint-bucketPhosphor paint-bucketPixelarticons

Related icons in Fluent UI System Icons

paint-brush-12-filled paint-brush-arrow-down-20-filled paint-brush-arrow-up-20-filled paint-brush-sparkle-20-filled paint-brush-subtract-16-filled paint-bucket-brush-16-filled

Use the paint bucket icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M7.5 1a.5.5 0 0 1 .5.5v.928q.237.108.434.302l3.712 3.71a1.5 1.5 0 0 1 0 2.12l-5.068 5.07a1.5 1.5 0 0 1-2.147-.026l-3.62-3.801a1.5 1.5 0 0 1 .026-2.096L6.313 2.73c.197-.197.435-.328.687-.392V1.5a.5.5 0 0 1 .5-.5M7 4.5V3.457L2.457 8h8.836l.146-.146a.5.5 0 0 0 0-.707L8 3.71v.79a.5.5 0 0 1-1 0M1.955 9a.5.5 0 0 0 .08.112l3.62 3.801a.5.5 0 0 0 .716.009L10.293 9zm10.966 1.222a.56.56 0 0 0-.842 0l-1.15 1.315C9.747 12.887 10.705 15 12.5 15s2.753-2.113 1.572-3.463zm-1.24 1.973l.819-.936l.819.936c.616.704.116 1.805-.819 1.805s-1.435-1.101-.819-1.805"/></svg>

React

import type { SVGProps } from "react";

export function FluentPaintBucket16Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M7.5 1a.5.5 0 0 1 .5.5v.928q.237.108.434.302l3.712 3.71a1.5 1.5 0 0 1 0 2.12l-5.068 5.07a1.5 1.5 0 0 1-2.147-.026l-3.62-3.801a1.5 1.5 0 0 1 .026-2.096L6.313 2.73c.197-.197.435-.328.687-.392V1.5a.5.5 0 0 1 .5-.5M7 4.5V3.457L2.457 8h8.836l.146-.146a.5.5 0 0 0 0-.707L8 3.71v.79a.5.5 0 0 1-1 0M1.955 9a.5.5 0 0 0 .08.112l3.62 3.801a.5.5 0 0 0 .716.009L10.293 9zm10.966 1.222a.56.56 0 0 0-.842 0l-1.15 1.315C9.747 12.887 10.705 15 12.5 15s2.753-2.113 1.572-3.463zm-1.24 1.973l.819-.936l.819.936c.616.704.116 1.805-.819 1.805s-1.435-1.101-.819-1.805"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M7.5 1a.5.5 0 0 1 .5.5v.928q.237.108.434.302l3.712 3.71a1.5 1.5 0 0 1 0 2.12l-5.068 5.07a1.5 1.5 0 0 1-2.147-.026l-3.62-3.801a1.5 1.5 0 0 1 .026-2.096L6.313 2.73c.197-.197.435-.328.687-.392V1.5a.5.5 0 0 1 .5-.5M7 4.5V3.457L2.457 8h8.836l.146-.146a.5.5 0 0 0 0-.707L8 3.71v.79a.5.5 0 0 1-1 0M1.955 9a.5.5 0 0 0 .08.112l3.62 3.801a.5.5 0 0 0 .716.009L10.293 9zm10.966 1.222a.56.56 0 0 0-.842 0l-1.15 1.315C9.747 12.887 10.705 15 12.5 15s2.753-2.113 1.572-3.463zm-1.24 1.973l.819-.936l.819.936c.616.704.116 1.805-.819 1.805s-1.435-1.101-.819-1.805"/></svg>
</template>

CSS

.icon-paint-bucket-16-regular {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.5%201a.5.5%200%200%201%20.5.5v.928q.237.108.434.302l3.712%203.71a1.5%201.5%200%200%201%200%202.12l-5.068%205.07a1.5%201.5%200%200%201-2.147-.026l-3.62-3.801a1.5%201.5%200%200%201%20.026-2.096L6.313%202.73c.197-.197.435-.328.687-.392V1.5a.5.5%200%200%201%20.5-.5M7%204.5V3.457L2.457%208h8.836l.146-.146a.5.5%200%200%200%200-.707L8%203.71v.79a.5.5%200%200%201-1%200M1.955%209a.5.5%200%200%200%20.08.112l3.62%203.801a.5.5%200%200%200%20.716.009L10.293%209zm10.966%201.222a.56.56%200%200%200-.842%200l-1.15%201.315C9.747%2012.887%2010.705%2015%2012.5%2015s2.753-2.113%201.572-3.463zm-1.24%201.973l.819-.936l.819.936c.616.704.116%201.805-.819%201.805s-1.435-1.101-.819-1.805%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.5%201a.5.5%200%200%201%20.5.5v.928q.237.108.434.302l3.712%203.71a1.5%201.5%200%200%201%200%202.12l-5.068%205.07a1.5%201.5%200%200%201-2.147-.026l-3.62-3.801a1.5%201.5%200%200%201%20.026-2.096L6.313%202.73c.197-.197.435-.328.687-.392V1.5a.5.5%200%200%201%20.5-.5M7%204.5V3.457L2.457%208h8.836l.146-.146a.5.5%200%200%200%200-.707L8%203.71v.79a.5.5%200%200%201-1%200M1.955%209a.5.5%200%200%200%20.08.112l3.62%203.801a.5.5%200%200%200%20.716.009L10.293%209zm10.966%201.222a.56.56%200%200%200-.842%200l-1.15%201.315C9.747%2012.887%2010.705%2015%2012.5%2015s2.753-2.113%201.572-3.463zm-1.24%201.973l.819-.936l.819.936c.616.704.116%201.805-.819%201.805s-1.435-1.101-.819-1.805%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/paint-bucket-16-regular.svg?color=%231a73e8&size=48