# broom icon Broom. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/broom - Category: Home & household - Use it for: clean up, sweep, tidy up, cleanup, tidy - Tags: broom, sweep, clean, clean-up, cleaning, tidy, housework, chores - Component name: BroomIcon - Added: 2026-10-15 ## Alternatives - `vacuum-cleaner`: cleaning as a chore or a service (owner of cleaning) - `mop`: floor cleaning - `x`: clear a field, a list or a selection ## Also fits - mop: sweeping or clean-up - cleaning: clean-up or sweeping ## Files 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. - line-round: https://gentleface.com/svg/line-round/16/broom.svg · PNG https://gentleface.com/png/line-round/16/broom.png · https://gentleface.com/png/line-round/32/broom.png · https://gentleface.com/png/line-round/48/broom.png - line-soft: https://gentleface.com/svg/line-soft/16/broom.svg · PNG https://gentleface.com/png/line-soft/16/broom.png · https://gentleface.com/png/line-soft/32/broom.png · https://gentleface.com/png/line-soft/48/broom.png - line-sharp: https://gentleface.com/svg/line-sharp/16/broom.svg · PNG https://gentleface.com/png/line-sharp/16/broom.png · https://gentleface.com/png/line-sharp/32/broom.png · https://gentleface.com/png/line-sharp/48/broom.png - solid-round: https://gentleface.com/svg/solid-round/16/broom.svg · PNG https://gentleface.com/png/solid-round/16/broom.png · https://gentleface.com/png/solid-round/32/broom.png · https://gentleface.com/png/solid-round/48/broom.png - solid-soft: https://gentleface.com/svg/solid-soft/16/broom.svg · PNG https://gentleface.com/png/solid-soft/16/broom.png · https://gentleface.com/png/solid-soft/32/broom.png · https://gentleface.com/png/solid-soft/48/broom.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/broom.svg · PNG https://gentleface.com/png/solid-sharp/16/broom.png · https://gentleface.com/png/solid-sharp/32/broom.png · https://gentleface.com/png/solid-sharp/48/broom.png The SVG of every style: https://gentleface.com/icons/broom.json (`svg`). ## Code (line-round) 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. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "broom" (line-round), MIT. https://gentleface.com/icons/broom import type { SVGProps } from 'react'; export function BroomIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "broom" (line-round), MIT. https://gentleface.com/icons/broom. Takes the text color. */ .icon-broom { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M9.879 8.439C9.913 8.651 9.882 8.853 9.786 9.046L7.257 14.103C7.19 14.238 7.097 14.352 6.978 14.445C6.843 14.55 6.692 14.616 6.523 14.643C6.355 14.67 6.19 14.656 6.029 14.599C5.887 14.548 5.763 14.47 5.656 14.363L1.637 10.344C1.53 10.237 1.452 10.113 1.401 9.971C1.344 9.81 1.33 9.645 1.357 9.477C1.384 9.308 1.45 9.157 1.555 9.022C1.648 8.903 1.762 8.81 1.897 8.743L6.954 6.214C7.147 6.118 7.349 6.087 7.561 6.121C7.774 6.156 7.956 6.249 8.108 6.401L8.5 6.793L14.146 1.146C14.246 1.047 14.364 0.997 14.5 0.997C14.636 0.997 14.754 1.047 14.854 1.146C14.951 1.244 15 1.362 15 1.5C15 1.638 14.951 1.756 14.854 1.854L9.207 7.5L9.599 7.892C9.751 8.044 9.844 8.226 9.879 8.439ZM6.344 7.637L8.363 9.656L8.892 8.599L7.401 7.108L6.344 7.637ZM2.344 9.637L6.363 13.656L7.892 10.599L5.401 8.108L2.344 9.637Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M9.879 8.439C9.913 8.651 9.882 8.853 9.786 9.046L7.257 14.103C7.19 14.238 7.097 14.352 6.978 14.445C6.843 14.55 6.692 14.616 6.523 14.643C6.355 14.67 6.19 14.656 6.029 14.599C5.887 14.548 5.763 14.47 5.656 14.363L1.637 10.344C1.53 10.237 1.452 10.113 1.401 9.971C1.344 9.81 1.33 9.645 1.357 9.477C1.384 9.308 1.45 9.157 1.555 9.022C1.648 8.903 1.762 8.81 1.897 8.743L6.954 6.214C7.147 6.118 7.349 6.087 7.561 6.121C7.774 6.156 7.956 6.249 8.108 6.401L8.5 6.793L14.146 1.146C14.246 1.047 14.364 0.997 14.5 0.997C14.636 0.997 14.754 1.047 14.854 1.146C14.951 1.244 15 1.362 15 1.5C15 1.638 14.951 1.756 14.854 1.854L9.207 7.5L9.599 7.892C9.751 8.044 9.844 8.226 9.879 8.439ZM6.344 7.637L8.363 9.656L8.892 8.599L7.401 7.108L6.344 7.637ZM2.344 9.637L6.363 13.656L7.892 10.599L5.401 8.108L2.344 9.637Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M9.879 8.439C9.913 8.651 9.882 8.853 9.786 9.046L7.257 14.103C7.19 14.238 7.097 14.352 6.978 14.445C6.843 14.55 6.692 14.616 6.523 14.643C6.355 14.67 6.19 14.656 6.029 14.599C5.887 14.548 5.763 14.47 5.656 14.363L1.637 10.344C1.53 10.237 1.452 10.113 1.401 9.971C1.344 9.81 1.33 9.645 1.357 9.477C1.384 9.308 1.45 9.157 1.555 9.022C1.648 8.903 1.762 8.81 1.897 8.743L6.954 6.214C7.147 6.118 7.349 6.087 7.561 6.121C7.774 6.156 7.956 6.249 8.108 6.401L8.5 6.793L14.146 1.146C14.246 1.047 14.364 0.997 14.5 0.997C14.636 0.997 14.754 1.047 14.854 1.146C14.951 1.244 15 1.362 15 1.5C15 1.638 14.951 1.756 14.854 1.854L9.207 7.5L9.599 7.892C9.751 8.044 9.844 8.226 9.879 8.439ZM6.344 7.637L8.363 9.656L8.892 8.599L7.401 7.108L6.344 7.637ZM2.344 9.637L6.363 13.656L7.892 10.599L5.401 8.108L2.344 9.637Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "broom" (line-round), MIT. https://gentleface.com/icons/broom import SwiftUI struct BroomIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 9.879, y: 8.439)) p.addCurve(to: CGPoint(x: 9.786, y: 9.046), control1: CGPoint(x: 9.913, y: 8.651), control2: CGPoint(x: 9.882, y: 8.853)) p.addLine(to: CGPoint(x: 7.257, y: 14.103)) p.addCurve(to: CGPoint(x: 6.978, y: 14.445), control1: CGPoint(x: 7.19, y: 14.238), control2: CGPoint(x: 7.097, y: 14.352)) p.addCurve(to: CGPoint(x: 6.523, y: 14.643), control1: CGPoint(x: 6.843, y: 14.55), control2: CGPoint(x: 6.692, y: 14.616)) p.addCurve(to: CGPoint(x: 6.029, y: 14.599), control1: CGPoint(x: 6.355, y: 14.67), control2: CGPoint(x: 6.19, y: 14.656)) p.addCurve(to: CGPoint(x: 5.656, y: 14.363), control1: CGPoint(x: 5.887, y: 14.548), control2: CGPoint(x: 5.763, y: 14.47)) p.addLine(to: CGPoint(x: 1.637, y: 10.344)) p.addCurve(to: CGPoint(x: 1.401, y: 9.971), control1: CGPoint(x: 1.53, y: 10.237), control2: CGPoint(x: 1.452, y: 10.113)) p.addCurve(to: CGPoint(x: 1.357, y: 9.477), control1: CGPoint(x: 1.344, y: 9.81), control2: CGPoint(x: 1.33, y: 9.645)) p.addCurve(to: CGPoint(x: 1.555, y: 9.022), control1: CGPoint(x: 1.384, y: 9.308), control2: CGPoint(x: 1.45, y: 9.157)) p.addCurve(to: CGPoint(x: 1.897, y: 8.743), control1: CGPoint(x: 1.648, y: 8.903), control2: CGPoint(x: 1.762, y: 8.81)) p.addLine(to: CGPoint(x: 6.954, y: 6.214)) p.addCurve(to: CGPoint(x: 7.561, y: 6.121), control1: CGPoint(x: 7.147, y: 6.118), control2: CGPoint(x: 7.349, y: 6.087)) p.addCurve(to: CGPoint(x: 8.108, y: 6.401), control1: CGPoint(x: 7.774, y: 6.156), control2: CGPoint(x: 7.956, y: 6.249)) p.addLine(to: CGPoint(x: 8.5, y: 6.793)) p.addLine(to: CGPoint(x: 14.146, y: 1.146)) p.addCurve(to: CGPoint(x: 14.5, y: 0.997), control1: CGPoint(x: 14.246, y: 1.047), control2: CGPoint(x: 14.364, y: 0.997)) p.addCurve(to: CGPoint(x: 14.854, y: 1.146), control1: CGPoint(x: 14.636, y: 0.997), control2: CGPoint(x: 14.754, y: 1.047)) p.addCurve(to: CGPoint(x: 15, y: 1.5), control1: CGPoint(x: 14.951, y: 1.244), control2: CGPoint(x: 15, y: 1.362)) p.addCurve(to: CGPoint(x: 14.854, y: 1.854), control1: CGPoint(x: 15, y: 1.638), control2: CGPoint(x: 14.951, y: 1.756)) p.addLine(to: CGPoint(x: 9.207, y: 7.5)) p.addLine(to: CGPoint(x: 9.599, y: 7.892)) p.addCurve(to: CGPoint(x: 9.879, y: 8.439), control1: CGPoint(x: 9.751, y: 8.044), control2: CGPoint(x: 9.844, y: 8.226)) p.closeSubpath() p.move(to: CGPoint(x: 6.344, y: 7.637)) p.addLine(to: CGPoint(x: 8.363, y: 9.656)) p.addLine(to: CGPoint(x: 8.892, y: 8.599)) p.addLine(to: CGPoint(x: 7.401, y: 7.108)) p.addLine(to: CGPoint(x: 6.344, y: 7.637)) p.closeSubpath() p.move(to: CGPoint(x: 2.344, y: 9.637)) p.addLine(to: CGPoint(x: 6.363, y: 13.656)) p.addLine(to: CGPoint(x: 7.892, y: 10.599)) p.addLine(to: CGPoint(x: 5.401, y: 8.108)) p.addLine(to: CGPoint(x: 2.344, y: 9.637)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // BroomIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "broom" (line-round), MIT. https://gentleface.com/icons/broom import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val BroomIcon: ImageVector by lazy { ImageVector.Builder( name = "broom", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M9.879 8.439C9.913 8.651 9.882 8.853 9.786 9.046L7.257 14.103C7.19 14.238 7.097 14.352 6.978 14.445C6.843 14.55 6.692 14.616 6.523 14.643C6.355 14.67 6.19 14.656 6.029 14.599C5.887 14.548 5.763 14.47 5.656 14.363L1.637 10.344C1.53 10.237 1.452 10.113 1.401 9.971C1.344 9.81 1.33 9.645 1.357 9.477C1.384 9.308 1.45 9.157 1.555 9.022C1.648 8.903 1.762 8.81 1.897 8.743L6.954 6.214C7.147 6.118 7.349 6.087 7.561 6.121C7.774 6.156 7.956 6.249 8.108 6.401L8.5 6.793L14.146 1.146C14.246 1.047 14.364 0.997 14.5 0.997C14.636 0.997 14.754 1.047 14.854 1.146C14.951 1.244 15 1.362 15 1.5C15 1.638 14.951 1.756 14.854 1.854L9.207 7.5L9.599 7.892C9.751 8.044 9.844 8.226 9.879 8.439ZM6.344 7.637L8.363 9.656L8.892 8.599L7.401 7.108L6.344 7.637ZM2.344 9.637L6.363 13.656L7.892 10.599L5.401 8.108L2.344 9.637Z"), fill = SolidColor(Color.Black), ).build() } // Icon(BroomIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "broom" (line-round), MIT. https://gentleface.com/icons/broom import 'package:flutter/widgets.dart'; class BroomIcon extends StatelessWidget { const BroomIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _BroomIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _BroomIconPainter extends CustomPainter { _BroomIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(9.879, 8.439) ..cubicTo(9.913, 8.651, 9.882, 8.853, 9.786, 9.046) ..lineTo(7.257, 14.103) ..cubicTo(7.19, 14.238, 7.097, 14.352, 6.978, 14.445) ..cubicTo(6.843, 14.55, 6.692, 14.616, 6.523, 14.643) ..cubicTo(6.355, 14.67, 6.19, 14.656, 6.029, 14.599) ..cubicTo(5.887, 14.548, 5.763, 14.47, 5.656, 14.363) ..lineTo(1.637, 10.344) ..cubicTo(1.53, 10.237, 1.452, 10.113, 1.401, 9.971) ..cubicTo(1.344, 9.81, 1.33, 9.645, 1.357, 9.477) ..cubicTo(1.384, 9.308, 1.45, 9.157, 1.555, 9.022) ..cubicTo(1.648, 8.903, 1.762, 8.81, 1.897, 8.743) ..lineTo(6.954, 6.214) ..cubicTo(7.147, 6.118, 7.349, 6.087, 7.561, 6.121) ..cubicTo(7.774, 6.156, 7.956, 6.249, 8.108, 6.401) ..lineTo(8.5, 6.793) ..lineTo(14.146, 1.146) ..cubicTo(14.246, 1.047, 14.364, 0.997, 14.5, 0.997) ..cubicTo(14.636, 0.997, 14.754, 1.047, 14.854, 1.146) ..cubicTo(14.951, 1.244, 15, 1.362, 15, 1.5) ..cubicTo(15, 1.638, 14.951, 1.756, 14.854, 1.854) ..lineTo(9.207, 7.5) ..lineTo(9.599, 7.892) ..cubicTo(9.751, 8.044, 9.844, 8.226, 9.879, 8.439) ..close() ..moveTo(6.344, 7.637) ..lineTo(8.363, 9.656) ..lineTo(8.892, 8.599) ..lineTo(7.401, 7.108) ..lineTo(6.344, 7.637) ..close() ..moveTo(2.344, 9.637) ..lineTo(6.363, 13.656) ..lineTo(7.892, 10.599) ..lineTo(5.401, 8.108) ..lineTo(2.344, 9.637) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_BroomIconPainter old) => old.color != color; } ```