paint brush icon

paint-brush-28 from Fluent UI System Color Icons by Microsoft Corporation · 28 · MIT Free for personal and commercial use.

Name: paint-brush-28
Set: Fluent UI System Color Icons
Style: 28
Viewbox: 28×28
License: MIT

4 other variants in Fluent UI System Color Icons

paint-brush-16 paint-brush-20 paint-brush-24 paint-brush-32

The same icon in other sets

paint-brushCarbon paint-brushFont Awesome Solid paint-brush-12-filledFluent UI System Icons paint-brushHeroIcons paint-brushLine Awesome paint-brush-fillMingCute Icon paint-brushPhosphor paint-brush-fillRemix Icon paint-brush-boldSolar

Use the paint brush icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGHO1fHeNm)" d="M6 2.75A.75.75 0 0 1 6.75 2h14.5a.75.75 0 0 1 .75.75V14H6z"/><path fill="url(#SVGhlyRJcgt)" d="M6 14v2.25A2.75 2.75 0 0 0 8.75 19h2.75v4.5a2.5 2.5 0 0 0 5 0V19h2.75A2.75 2.75 0 0 0 22 16.25V14z"/><path fill="url(#SVGx2opibQg)" d="M6 14a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v.5H6z"/><path fill="url(#SVGD91JFdJa)" d="M16.25 7a.75.75 0 0 0 .75-.75V2h-1.5v4.25c0 .414.336.75.75.75"/><path fill="url(#SVGD91JFdJa)" d="M20 8.25V2h-1.5v6.25a.75.75 0 0 0 1.5 0"/><defs><linearGradient id="SVGHO1fHeNm" x1="10.8" x2="17.941" y1="-1.75" y2="18.058" gradientUnits="userSpaceOnUse"><stop offset=".085" stop-color="#ffcd0f"/><stop offset=".991" stop-color="#e67505"/></linearGradient><linearGradient id="SVGhlyRJcgt" x1="6" x2="7.08" y1="9.765" y2="29.101" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#ac80ff"/><stop offset="1" stop-color="#5750e2"/></linearGradient><linearGradient id="SVGx2opibQg" x1="9.805" x2="9.904" y1="13.199" y2="14.893" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#9c6cfe"/><stop offset="1" stop-color="#5750e2"/></linearGradient><linearGradient id="SVGD91JFdJa" x1="15.5" x2="21.37" y1=".056" y2="6.253" gradientUnits="userSpaceOnUse"><stop stop-color="#ff921f"/><stop offset="1" stop-color="#eb4824"/></linearGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorPaintBrush28(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGHO1fHeNm)" d="M6 2.75A.75.75 0 0 1 6.75 2h14.5a.75.75 0 0 1 .75.75V14H6z"/><path fill="url(#SVGhlyRJcgt)" d="M6 14v2.25A2.75 2.75 0 0 0 8.75 19h2.75v4.5a2.5 2.5 0 0 0 5 0V19h2.75A2.75 2.75 0 0 0 22 16.25V14z"/><path fill="url(#SVGx2opibQg)" d="M6 14a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v.5H6z"/><path fill="url(#SVGD91JFdJa)" d="M16.25 7a.75.75 0 0 0 .75-.75V2h-1.5v4.25c0 .414.336.75.75.75"/><path fill="url(#SVGD91JFdJa)" d="M20 8.25V2h-1.5v6.25a.75.75 0 0 0 1.5 0"/><defs><linearGradient id="SVGHO1fHeNm" x1="10.8" x2="17.941" y1="-1.75" y2="18.058" gradientUnits="userSpaceOnUse"><stop offset=".085" stopColor="#ffcd0f"/><stop offset=".991" stopColor="#e67505"/></linearGradient><linearGradient id="SVGhlyRJcgt" x1="6" x2="7.08" y1="9.765" y2="29.101" gradientUnits="userSpaceOnUse"><stop offset=".125" stopColor="#ac80ff"/><stop offset="1" stopColor="#5750e2"/></linearGradient><linearGradient id="SVGx2opibQg" x1="9.805" x2="9.904" y1="13.199" y2="14.893" gradientUnits="userSpaceOnUse"><stop offset=".125" stopColor="#9c6cfe"/><stop offset="1" stopColor="#5750e2"/></linearGradient><linearGradient id="SVGD91JFdJa" x1="15.5" x2="21.37" y1=".056" y2="6.253" gradientUnits="userSpaceOnUse"><stop stopColor="#ff921f"/><stop offset="1" stopColor="#eb4824"/></linearGradient></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGHO1fHeNm)" d="M6 2.75A.75.75 0 0 1 6.75 2h14.5a.75.75 0 0 1 .75.75V14H6z"/><path fill="url(#SVGhlyRJcgt)" d="M6 14v2.25A2.75 2.75 0 0 0 8.75 19h2.75v4.5a2.5 2.5 0 0 0 5 0V19h2.75A2.75 2.75 0 0 0 22 16.25V14z"/><path fill="url(#SVGx2opibQg)" d="M6 14a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v.5H6z"/><path fill="url(#SVGD91JFdJa)" d="M16.25 7a.75.75 0 0 0 .75-.75V2h-1.5v4.25c0 .414.336.75.75.75"/><path fill="url(#SVGD91JFdJa)" d="M20 8.25V2h-1.5v6.25a.75.75 0 0 0 1.5 0"/><defs><linearGradient id="SVGHO1fHeNm" x1="10.8" x2="17.941" y1="-1.75" y2="18.058" gradientUnits="userSpaceOnUse"><stop offset=".085" stop-color="#ffcd0f"/><stop offset=".991" stop-color="#e67505"/></linearGradient><linearGradient id="SVGhlyRJcgt" x1="6" x2="7.08" y1="9.765" y2="29.101" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#ac80ff"/><stop offset="1" stop-color="#5750e2"/></linearGradient><linearGradient id="SVGx2opibQg" x1="9.805" x2="9.904" y1="13.199" y2="14.893" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#9c6cfe"/><stop offset="1" stop-color="#5750e2"/></linearGradient><linearGradient id="SVGD91JFdJa" x1="15.5" x2="21.37" y1=".056" y2="6.253" gradientUnits="userSpaceOnUse"><stop stop-color="#ff921f"/><stop offset="1" stop-color="#eb4824"/></linearGradient></defs></g></svg>
</template>

CSS

.icon-paint-brush-28 {
  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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGHO1fHeNm)%22%20d%3D%22M6%202.75A.75.75%200%200%201%206.75%202h14.5a.75.75%200%200%201%20.75.75V14H6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGhlyRJcgt)%22%20d%3D%22M6%2014v2.25A2.75%202.75%200%200%200%208.75%2019h2.75v4.5a2.5%202.5%200%200%200%205%200V19h2.75A2.75%202.75%200%200%200%2022%2016.25V14z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGx2opibQg)%22%20d%3D%22M6%2014a1%201%200%200%201%201-1h14a1%201%200%200%201%201%201v.5H6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGD91JFdJa)%22%20d%3D%22M16.25%207a.75.75%200%200%200%20.75-.75V2h-1.5v4.25c0%20.414.336.75.75.75%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGD91JFdJa)%22%20d%3D%22M20%208.25V2h-1.5v6.25a.75.75%200%200%200%201.5%200%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGHO1fHeNm%22%20x1%3D%2210.8%22%20x2%3D%2217.941%22%20y1%3D%22-1.75%22%20y2%3D%2218.058%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.085%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3Cstop%20offset%3D%22.991%22%20stop-color%3D%22%23e67505%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGhlyRJcgt%22%20x1%3D%226%22%20x2%3D%227.08%22%20y1%3D%229.765%22%20y2%3D%2229.101%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.125%22%20stop-color%3D%22%23ac80ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235750e2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGx2opibQg%22%20x1%3D%229.805%22%20x2%3D%229.904%22%20y1%3D%2213.199%22%20y2%3D%2214.893%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.125%22%20stop-color%3D%22%239c6cfe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235750e2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGD91JFdJa%22%20x1%3D%2215.5%22%20x2%3D%2221.37%22%20y1%3D%22.056%22%20y2%3D%226.253%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff921f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23eb4824%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGHO1fHeNm)%22%20d%3D%22M6%202.75A.75.75%200%200%201%206.75%202h14.5a.75.75%200%200%201%20.75.75V14H6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGhlyRJcgt)%22%20d%3D%22M6%2014v2.25A2.75%202.75%200%200%200%208.75%2019h2.75v4.5a2.5%202.5%200%200%200%205%200V19h2.75A2.75%202.75%200%200%200%2022%2016.25V14z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGx2opibQg)%22%20d%3D%22M6%2014a1%201%200%200%201%201-1h14a1%201%200%200%201%201%201v.5H6z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGD91JFdJa)%22%20d%3D%22M16.25%207a.75.75%200%200%200%20.75-.75V2h-1.5v4.25c0%20.414.336.75.75.75%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGD91JFdJa)%22%20d%3D%22M20%208.25V2h-1.5v6.25a.75.75%200%200%200%201.5%200%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGHO1fHeNm%22%20x1%3D%2210.8%22%20x2%3D%2217.941%22%20y1%3D%22-1.75%22%20y2%3D%2218.058%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.085%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3Cstop%20offset%3D%22.991%22%20stop-color%3D%22%23e67505%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGhlyRJcgt%22%20x1%3D%226%22%20x2%3D%227.08%22%20y1%3D%229.765%22%20y2%3D%2229.101%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.125%22%20stop-color%3D%22%23ac80ff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235750e2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGx2opibQg%22%20x1%3D%229.805%22%20x2%3D%229.904%22%20y1%3D%2213.199%22%20y2%3D%2214.893%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.125%22%20stop-color%3D%22%239c6cfe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235750e2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGD91JFdJa%22%20x1%3D%2215.5%22%20x2%3D%2221.37%22%20y1%3D%22.056%22%20y2%3D%226.253%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff921f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23eb4824%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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