Fluent Icons

Paint Brush icon

Used in formatting content scenarios. The Paint Brush icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled, color and light styles in 6 sizes from 12 to 32 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Paint Brush Color

Color

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_paint_brush_24_regular.svg

Paint Brush icon in React

npm install @fluentui/react-icons

import { PaintBrush24Regular } from "@fluentui/react-icons";

export function Example() {
  return <PaintBrush24Regular aria-label="Paint Brush" />;
}

Paint Brush icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/paint_brush_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/paint_brush_24_regular.svg" width="24" height="24" alt="Paint Brush">

Paint Brush icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.PaintBrush())" />

Paint Brush icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.paint_brush_24_regular)

Paint Brush icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF593;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF593;" FontSize="24" />

Paint Brush icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_paint_brush_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f593";
  font-size: 24px;
}

Paint Brush icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_paint_brush_24_regular" />

// Kotlin
R.drawable.ic_fluent_paint_brush_24_regular

Paint Brush icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .paintBrush24Regular)

Paint Brush icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Paint Brush 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 { PaintBrush24Regular, PaintBrush24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PaintBrush24Regular aria-label="Paint Brush" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_paint_brush_24_regular.svg" width="24" height="24" alt="Paint Brush">

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="M5.75 2C5.33579 2 5 2.33579 5 2.75V14.2505C5 15.4932 6.00736 16.5005 7.25 16.5005H9.49976V19.5C9.49976 20.8807 10.619 22 11.9998 22C13.3805 22 14.4998 20.8807 14.4998 19.5V16.5005H16.75C17.9926 16.5005 19 15.4932 19 14.2505V2.75C19 2.33579 18.6642 2 18.25 2H5.75ZM6.5 11.0003V3.5H12.4998V5.25154C12.4998 5.66576 12.8355 6.00154 13.2498 6.00154C13.664 6.00154 13.9998 5.66576 13.9998 5.25154V3.5H14.9998V6.25112C14.9998 6.66534 15.3355 7.00112 15.7498 7.00112C16.164 7.00112 16.4998 6.66534 16.4998 6.25112V3.5H17.5V11.0003H6.5ZM6.5 14.2505V12.5003H17.5V14.2505C17.5 14.6647 17.1642 15.0005 16.75 15.0005H13.7498C13.3355 15.0005 12.9998 15.3363 12.9998 15.7505V19.5C12.9998 20.0523 12.552 20.5 11.9998 20.5C11.4475 20.5 10.9998 20.0523 10.9998 19.5V15.7505C10.9998 15.3363 10.664 15.0005 10.2498 15.0005H7.25C6.83579 15.0005 6.5 14.6647 6.5 14.2505Z" fill="currentColor"/></svg>

Details

NamePaint Brush
StylesRegular (outlined), Filled, Color, Light
Sizes12 px, 16 px, 20 px, 24 px, 28 px, 32 px
Regular (outlined) fileic_fluent_paint_brush_24_regular.svg
Filled fileic_fluent_paint_brush_24_filled.svg
Color fileic_fluent_paint_brush_24_color.svg
React (Regular)PaintBrush12Regular, PaintBrush16Regular, PaintBrush20Regular, PaintBrush24Regular, PaintBrush28Regular, PaintBrush32Regular
React (Filled)PaintBrush12Filled, PaintBrush16Filled, PaintBrush20Filled, PaintBrush24Filled, PaintBrush28Filled, PaintBrush32Filled
React (Color)PaintBrush16Color, PaintBrush20Color, PaintBrush24Color, PaintBrush28Color, PaintBrush32Color
React (Light)PaintBrush32Light
LicenseMIT (© Microsoft Corporation)

Keywords

colorpaintdesignformatanalog

Related icons

Paint Brush Arrow DownPaint Brush Arrow UpPaint Brush SparklePaint Brush SubtractPaint BucketPaint Bucket BrushClipboard BrushColor BackgroundColor Background AccentColor FillColor Fill AccentColor Line