# toolbar icon Toolbar. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/toolbar - Category: Layout & interface - Use it for: toolbar, tool bar, action bar - Tags: toolbar, tool bar, action bar, button bar, floating toolbar, tools, tool palette, controls, ribbon, editor - Component name: ToolbarIcon - Added: 2026-10-19 ## 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/toolbar.svg · PNG https://gentleface.com/png/line-round/16/toolbar.png · https://gentleface.com/png/line-round/32/toolbar.png · https://gentleface.com/png/line-round/48/toolbar.png - line-soft: https://gentleface.com/svg/line-soft/16/toolbar.svg · PNG https://gentleface.com/png/line-soft/16/toolbar.png · https://gentleface.com/png/line-soft/32/toolbar.png · https://gentleface.com/png/line-soft/48/toolbar.png - line-sharp: https://gentleface.com/svg/line-sharp/16/toolbar.svg · PNG https://gentleface.com/png/line-sharp/16/toolbar.png · https://gentleface.com/png/line-sharp/32/toolbar.png · https://gentleface.com/png/line-sharp/48/toolbar.png - solid-round: https://gentleface.com/svg/solid-round/16/toolbar.svg · PNG https://gentleface.com/png/solid-round/16/toolbar.png · https://gentleface.com/png/solid-round/32/toolbar.png · https://gentleface.com/png/solid-round/48/toolbar.png - solid-soft: https://gentleface.com/svg/solid-soft/16/toolbar.svg · PNG https://gentleface.com/png/solid-soft/16/toolbar.png · https://gentleface.com/png/solid-soft/32/toolbar.png · https://gentleface.com/png/solid-soft/48/toolbar.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/toolbar.svg · PNG https://gentleface.com/png/solid-sharp/16/toolbar.png · https://gentleface.com/png/solid-sharp/32/toolbar.png · https://gentleface.com/png/solid-sharp/48/toolbar.png The SVG of every style: https://gentleface.com/icons/toolbar.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 "toolbar" (line-round), MIT. https://gentleface.com/icons/toolbar import type { SVGProps } from 'react'; export function ToolbarIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "toolbar" (line-round), MIT. https://gentleface.com/icons/toolbar. Takes the text color. */ .icon-toolbar { 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='M15 10C15 10.254 14.953 10.5 14.86 10.736C14.758 10.993 14.609 11.219 14.414 11.414C14.219 11.609 13.993 11.758 13.736 11.86C13.5 11.953 13.254 12 13 12L3 12C2.746 12 2.5 11.953 2.264 11.86C2.007 11.758 1.781 11.609 1.586 11.414C1.391 11.219 1.242 10.993 1.14 10.736C1.047 10.5 1 10.254 1 10L1 6C1 5.746 1.047 5.5 1.14 5.264C1.242 5.007 1.391 4.781 1.586 4.586C1.781 4.391 2.007 4.242 2.264 4.14C2.5 4.047 2.746 4 3 4L13 4C13.254 4 13.5 4.047 13.736 4.14C13.993 4.242 14.219 4.391 14.414 4.586C14.609 4.781 14.758 5.007 14.86 5.264C14.953 5.5 15 5.746 15 6L15 10ZM7 8L3 5L3 10L4.5 8.5L5.5 10.5L6.5 10.5L5.5 8L7 8ZM9 6L9 10L13 10L13 6L9 6Z'/%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='M15 10C15 10.254 14.953 10.5 14.86 10.736C14.758 10.993 14.609 11.219 14.414 11.414C14.219 11.609 13.993 11.758 13.736 11.86C13.5 11.953 13.254 12 13 12L3 12C2.746 12 2.5 11.953 2.264 11.86C2.007 11.758 1.781 11.609 1.586 11.414C1.391 11.219 1.242 10.993 1.14 10.736C1.047 10.5 1 10.254 1 10L1 6C1 5.746 1.047 5.5 1.14 5.264C1.242 5.007 1.391 4.781 1.586 4.586C1.781 4.391 2.007 4.242 2.264 4.14C2.5 4.047 2.746 4 3 4L13 4C13.254 4 13.5 4.047 13.736 4.14C13.993 4.242 14.219 4.391 14.414 4.586C14.609 4.781 14.758 5.007 14.86 5.264C14.953 5.5 15 5.746 15 6L15 10ZM7 8L3 5L3 10L4.5 8.5L5.5 10.5L6.5 10.5L5.5 8L7 8ZM9 6L9 10L13 10L13 6L9 6Z'/%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='M15 10C15 10.254 14.953 10.5 14.86 10.736C14.758 10.993 14.609 11.219 14.414 11.414C14.219 11.609 13.993 11.758 13.736 11.86C13.5 11.953 13.254 12 13 12L3 12C2.746 12 2.5 11.953 2.264 11.86C2.007 11.758 1.781 11.609 1.586 11.414C1.391 11.219 1.242 10.993 1.14 10.736C1.047 10.5 1 10.254 1 10L1 6C1 5.746 1.047 5.5 1.14 5.264C1.242 5.007 1.391 4.781 1.586 4.586C1.781 4.391 2.007 4.242 2.264 4.14C2.5 4.047 2.746 4 3 4L13 4C13.254 4 13.5 4.047 13.736 4.14C13.993 4.242 14.219 4.391 14.414 4.586C14.609 4.781 14.758 5.007 14.86 5.264C14.953 5.5 15 5.746 15 6L15 10ZM7 8L3 5L3 10L4.5 8.5L5.5 10.5L6.5 10.5L5.5 8L7 8ZM9 6L9 10L13 10L13 6L9 6Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "toolbar" (line-round), MIT. https://gentleface.com/icons/toolbar import SwiftUI struct ToolbarIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 15, y: 10)) p.addCurve(to: CGPoint(x: 14.86, y: 10.736), control1: CGPoint(x: 15, y: 10.254), control2: CGPoint(x: 14.953, y: 10.5)) p.addCurve(to: CGPoint(x: 14.414, y: 11.414), control1: CGPoint(x: 14.758, y: 10.993), control2: CGPoint(x: 14.609, y: 11.219)) p.addCurve(to: CGPoint(x: 13.736, y: 11.86), control1: CGPoint(x: 14.219, y: 11.609), control2: CGPoint(x: 13.993, y: 11.758)) p.addCurve(to: CGPoint(x: 13, y: 12), control1: CGPoint(x: 13.5, y: 11.953), control2: CGPoint(x: 13.254, y: 12)) p.addLine(to: CGPoint(x: 3, y: 12)) p.addCurve(to: CGPoint(x: 2.264, y: 11.86), control1: CGPoint(x: 2.746, y: 12), control2: CGPoint(x: 2.5, y: 11.953)) p.addCurve(to: CGPoint(x: 1.586, y: 11.414), control1: CGPoint(x: 2.007, y: 11.758), control2: CGPoint(x: 1.781, y: 11.609)) p.addCurve(to: CGPoint(x: 1.14, y: 10.736), control1: CGPoint(x: 1.391, y: 11.219), control2: CGPoint(x: 1.242, y: 10.993)) p.addCurve(to: CGPoint(x: 1, y: 10), control1: CGPoint(x: 1.047, y: 10.5), control2: CGPoint(x: 1, y: 10.254)) p.addLine(to: CGPoint(x: 1, y: 6)) p.addCurve(to: CGPoint(x: 1.14, y: 5.264), control1: CGPoint(x: 1, y: 5.746), control2: CGPoint(x: 1.047, y: 5.5)) p.addCurve(to: CGPoint(x: 1.586, y: 4.586), control1: CGPoint(x: 1.242, y: 5.007), control2: CGPoint(x: 1.391, y: 4.781)) p.addCurve(to: CGPoint(x: 2.264, y: 4.14), control1: CGPoint(x: 1.781, y: 4.391), control2: CGPoint(x: 2.007, y: 4.242)) p.addCurve(to: CGPoint(x: 3, y: 4), control1: CGPoint(x: 2.5, y: 4.047), control2: CGPoint(x: 2.746, y: 4)) p.addLine(to: CGPoint(x: 13, y: 4)) p.addCurve(to: CGPoint(x: 13.736, y: 4.14), control1: CGPoint(x: 13.254, y: 4), control2: CGPoint(x: 13.5, y: 4.047)) p.addCurve(to: CGPoint(x: 14.414, y: 4.586), control1: CGPoint(x: 13.993, y: 4.242), control2: CGPoint(x: 14.219, y: 4.391)) p.addCurve(to: CGPoint(x: 14.86, y: 5.264), control1: CGPoint(x: 14.609, y: 4.781), control2: CGPoint(x: 14.758, y: 5.007)) p.addCurve(to: CGPoint(x: 15, y: 6), control1: CGPoint(x: 14.953, y: 5.5), control2: CGPoint(x: 15, y: 5.746)) p.addLine(to: CGPoint(x: 15, y: 10)) p.closeSubpath() p.move(to: CGPoint(x: 7, y: 8)) p.addLine(to: CGPoint(x: 3, y: 5)) p.addLine(to: CGPoint(x: 3, y: 10)) p.addLine(to: CGPoint(x: 4.5, y: 8.5)) p.addLine(to: CGPoint(x: 5.5, y: 10.5)) p.addLine(to: CGPoint(x: 6.5, y: 10.5)) p.addLine(to: CGPoint(x: 5.5, y: 8)) p.addLine(to: CGPoint(x: 7, y: 8)) p.closeSubpath() p.move(to: CGPoint(x: 9, y: 6)) p.addLine(to: CGPoint(x: 9, y: 10)) p.addLine(to: CGPoint(x: 13, y: 10)) p.addLine(to: CGPoint(x: 13, y: 6)) p.addLine(to: CGPoint(x: 9, y: 6)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ToolbarIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "toolbar" (line-round), MIT. https://gentleface.com/icons/toolbar 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 ToolbarIcon: ImageVector by lazy { ImageVector.Builder( name = "toolbar", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M15 10C15 10.254 14.953 10.5 14.86 10.736C14.758 10.993 14.609 11.219 14.414 11.414C14.219 11.609 13.993 11.758 13.736 11.86C13.5 11.953 13.254 12 13 12L3 12C2.746 12 2.5 11.953 2.264 11.86C2.007 11.758 1.781 11.609 1.586 11.414C1.391 11.219 1.242 10.993 1.14 10.736C1.047 10.5 1 10.254 1 10L1 6C1 5.746 1.047 5.5 1.14 5.264C1.242 5.007 1.391 4.781 1.586 4.586C1.781 4.391 2.007 4.242 2.264 4.14C2.5 4.047 2.746 4 3 4L13 4C13.254 4 13.5 4.047 13.736 4.14C13.993 4.242 14.219 4.391 14.414 4.586C14.609 4.781 14.758 5.007 14.86 5.264C14.953 5.5 15 5.746 15 6L15 10ZM7 8L3 5L3 10L4.5 8.5L5.5 10.5L6.5 10.5L5.5 8L7 8ZM9 6L9 10L13 10L13 6L9 6Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ToolbarIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "toolbar" (line-round), MIT. https://gentleface.com/icons/toolbar import 'package:flutter/widgets.dart'; class ToolbarIcon extends StatelessWidget { const ToolbarIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ToolbarIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ToolbarIconPainter extends CustomPainter { _ToolbarIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(15, 10) ..cubicTo(15, 10.254, 14.953, 10.5, 14.86, 10.736) ..cubicTo(14.758, 10.993, 14.609, 11.219, 14.414, 11.414) ..cubicTo(14.219, 11.609, 13.993, 11.758, 13.736, 11.86) ..cubicTo(13.5, 11.953, 13.254, 12, 13, 12) ..lineTo(3, 12) ..cubicTo(2.746, 12, 2.5, 11.953, 2.264, 11.86) ..cubicTo(2.007, 11.758, 1.781, 11.609, 1.586, 11.414) ..cubicTo(1.391, 11.219, 1.242, 10.993, 1.14, 10.736) ..cubicTo(1.047, 10.5, 1, 10.254, 1, 10) ..lineTo(1, 6) ..cubicTo(1, 5.746, 1.047, 5.5, 1.14, 5.264) ..cubicTo(1.242, 5.007, 1.391, 4.781, 1.586, 4.586) ..cubicTo(1.781, 4.391, 2.007, 4.242, 2.264, 4.14) ..cubicTo(2.5, 4.047, 2.746, 4, 3, 4) ..lineTo(13, 4) ..cubicTo(13.254, 4, 13.5, 4.047, 13.736, 4.14) ..cubicTo(13.993, 4.242, 14.219, 4.391, 14.414, 4.586) ..cubicTo(14.609, 4.781, 14.758, 5.007, 14.86, 5.264) ..cubicTo(14.953, 5.5, 15, 5.746, 15, 6) ..lineTo(15, 10) ..close() ..moveTo(7, 8) ..lineTo(3, 5) ..lineTo(3, 10) ..lineTo(4.5, 8.5) ..lineTo(5.5, 10.5) ..lineTo(6.5, 10.5) ..lineTo(5.5, 8) ..lineTo(7, 8) ..close() ..moveTo(9, 6) ..lineTo(9, 10) ..lineTo(13, 10) ..lineTo(13, 6) ..lineTo(9, 6) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ToolbarIconPainter old) => old.color != color; } ```