# axe icon Axe. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/axe - Category: Tools - Use it for: axe, chop, lumber, woodcutting - Tags: axe, hatchet, chop, lumber, wood, firewood, tool, camping, cut - Component name: AxeIcon - Added: 2026-10-16 ## 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/axe.svg · PNG https://gentleface.com/png/line-round/16/axe.png · https://gentleface.com/png/line-round/32/axe.png · https://gentleface.com/png/line-round/48/axe.png - line-soft: https://gentleface.com/svg/line-soft/16/axe.svg · PNG https://gentleface.com/png/line-soft/16/axe.png · https://gentleface.com/png/line-soft/32/axe.png · https://gentleface.com/png/line-soft/48/axe.png - line-sharp: https://gentleface.com/svg/line-sharp/16/axe.svg · PNG https://gentleface.com/png/line-sharp/16/axe.png · https://gentleface.com/png/line-sharp/32/axe.png · https://gentleface.com/png/line-sharp/48/axe.png - solid-round: https://gentleface.com/svg/solid-round/16/axe.svg · PNG https://gentleface.com/png/solid-round/16/axe.png · https://gentleface.com/png/solid-round/32/axe.png · https://gentleface.com/png/solid-round/48/axe.png - solid-soft: https://gentleface.com/svg/solid-soft/16/axe.svg · PNG https://gentleface.com/png/solid-soft/16/axe.png · https://gentleface.com/png/solid-soft/32/axe.png · https://gentleface.com/png/solid-soft/48/axe.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/axe.svg · PNG https://gentleface.com/png/solid-sharp/16/axe.png · https://gentleface.com/png/solid-sharp/32/axe.png · https://gentleface.com/png/solid-sharp/48/axe.png The SVG of every style: https://gentleface.com/icons/axe.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 "axe" (line-round), MIT. https://gentleface.com/icons/axe import type { SVGProps } from 'react'; export function AxeIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "axe" (line-round), MIT. https://gentleface.com/icons/axe. Takes the text color. */ .icon-axe { 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='M4.207 14.5C4.012 14.695 3.776 14.793 3.5 14.793C3.224 14.793 2.988 14.695 2.793 14.5L1.5 13.207C1.305 13.012 1.207 12.776 1.207 12.5C1.207 12.224 1.305 11.988 1.5 11.793L7.793 5.5L7.5 5.207C7.305 5.012 7.207 4.776 7.207 4.5C7.207 4.224 7.305 3.988 7.5 3.793L8.793 2.5C8.988 2.305 9.224 2.207 9.5 2.207C9.776 2.207 10.012 2.305 10.207 2.5L14.854 7.146C14.951 7.244 15 7.362 15 7.5C15 8.199 14.871 8.874 14.614 9.525C14.334 10.231 13.926 10.852 13.389 11.389C12.852 11.926 12.231 12.334 11.525 12.614C10.874 12.871 10.199 13 9.5 13C9.359 13 9.241 12.952 9.144 12.856C9.048 12.759 9 12.641 9 12.5L9 9.707L4.207 14.5ZM8.207 4.5L8.5 4.793C8.695 4.988 8.793 5.224 8.793 5.5C8.793 5.776 8.695 6.012 8.5 6.207L8.207 6.5L9.854 8.146C9.951 8.244 10 8.362 10 8.5L10 11.973C10.395 11.929 10.781 11.833 11.156 11.684C11.734 11.455 12.243 11.121 12.682 10.682C13.121 10.243 13.455 9.734 13.684 9.156C13.87 8.687 13.974 8.203 13.996 7.703L9.5 3.207L8.207 4.5ZM3.5 13.793L8.793 8.5L7.5 7.207L2.207 12.5L3.5 13.793Z'/%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='M4.207 14.5C4.012 14.695 3.776 14.793 3.5 14.793C3.224 14.793 2.988 14.695 2.793 14.5L1.5 13.207C1.305 13.012 1.207 12.776 1.207 12.5C1.207 12.224 1.305 11.988 1.5 11.793L7.793 5.5L7.5 5.207C7.305 5.012 7.207 4.776 7.207 4.5C7.207 4.224 7.305 3.988 7.5 3.793L8.793 2.5C8.988 2.305 9.224 2.207 9.5 2.207C9.776 2.207 10.012 2.305 10.207 2.5L14.854 7.146C14.951 7.244 15 7.362 15 7.5C15 8.199 14.871 8.874 14.614 9.525C14.334 10.231 13.926 10.852 13.389 11.389C12.852 11.926 12.231 12.334 11.525 12.614C10.874 12.871 10.199 13 9.5 13C9.359 13 9.241 12.952 9.144 12.856C9.048 12.759 9 12.641 9 12.5L9 9.707L4.207 14.5ZM8.207 4.5L8.5 4.793C8.695 4.988 8.793 5.224 8.793 5.5C8.793 5.776 8.695 6.012 8.5 6.207L8.207 6.5L9.854 8.146C9.951 8.244 10 8.362 10 8.5L10 11.973C10.395 11.929 10.781 11.833 11.156 11.684C11.734 11.455 12.243 11.121 12.682 10.682C13.121 10.243 13.455 9.734 13.684 9.156C13.87 8.687 13.974 8.203 13.996 7.703L9.5 3.207L8.207 4.5ZM3.5 13.793L8.793 8.5L7.5 7.207L2.207 12.5L3.5 13.793Z'/%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='M4.207 14.5C4.012 14.695 3.776 14.793 3.5 14.793C3.224 14.793 2.988 14.695 2.793 14.5L1.5 13.207C1.305 13.012 1.207 12.776 1.207 12.5C1.207 12.224 1.305 11.988 1.5 11.793L7.793 5.5L7.5 5.207C7.305 5.012 7.207 4.776 7.207 4.5C7.207 4.224 7.305 3.988 7.5 3.793L8.793 2.5C8.988 2.305 9.224 2.207 9.5 2.207C9.776 2.207 10.012 2.305 10.207 2.5L14.854 7.146C14.951 7.244 15 7.362 15 7.5C15 8.199 14.871 8.874 14.614 9.525C14.334 10.231 13.926 10.852 13.389 11.389C12.852 11.926 12.231 12.334 11.525 12.614C10.874 12.871 10.199 13 9.5 13C9.359 13 9.241 12.952 9.144 12.856C9.048 12.759 9 12.641 9 12.5L9 9.707L4.207 14.5ZM8.207 4.5L8.5 4.793C8.695 4.988 8.793 5.224 8.793 5.5C8.793 5.776 8.695 6.012 8.5 6.207L8.207 6.5L9.854 8.146C9.951 8.244 10 8.362 10 8.5L10 11.973C10.395 11.929 10.781 11.833 11.156 11.684C11.734 11.455 12.243 11.121 12.682 10.682C13.121 10.243 13.455 9.734 13.684 9.156C13.87 8.687 13.974 8.203 13.996 7.703L9.5 3.207L8.207 4.5ZM3.5 13.793L8.793 8.5L7.5 7.207L2.207 12.5L3.5 13.793Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "axe" (line-round), MIT. https://gentleface.com/icons/axe import SwiftUI struct AxeIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 4.207, y: 14.5)) p.addCurve(to: CGPoint(x: 3.5, y: 14.793), control1: CGPoint(x: 4.012, y: 14.695), control2: CGPoint(x: 3.776, y: 14.793)) p.addCurve(to: CGPoint(x: 2.793, y: 14.5), control1: CGPoint(x: 3.224, y: 14.793), control2: CGPoint(x: 2.988, y: 14.695)) p.addLine(to: CGPoint(x: 1.5, y: 13.207)) p.addCurve(to: CGPoint(x: 1.207, y: 12.5), control1: CGPoint(x: 1.305, y: 13.012), control2: CGPoint(x: 1.207, y: 12.776)) p.addCurve(to: CGPoint(x: 1.5, y: 11.793), control1: CGPoint(x: 1.207, y: 12.224), control2: CGPoint(x: 1.305, y: 11.988)) p.addLine(to: CGPoint(x: 7.793, y: 5.5)) p.addLine(to: CGPoint(x: 7.5, y: 5.207)) p.addCurve(to: CGPoint(x: 7.207, y: 4.5), control1: CGPoint(x: 7.305, y: 5.012), control2: CGPoint(x: 7.207, y: 4.776)) p.addCurve(to: CGPoint(x: 7.5, y: 3.793), control1: CGPoint(x: 7.207, y: 4.224), control2: CGPoint(x: 7.305, y: 3.988)) p.addLine(to: CGPoint(x: 8.793, y: 2.5)) p.addCurve(to: CGPoint(x: 9.5, y: 2.207), control1: CGPoint(x: 8.988, y: 2.305), control2: CGPoint(x: 9.224, y: 2.207)) p.addCurve(to: CGPoint(x: 10.207, y: 2.5), control1: CGPoint(x: 9.776, y: 2.207), control2: CGPoint(x: 10.012, y: 2.305)) p.addLine(to: CGPoint(x: 14.854, y: 7.146)) p.addCurve(to: CGPoint(x: 15, y: 7.5), control1: CGPoint(x: 14.951, y: 7.244), control2: CGPoint(x: 15, y: 7.362)) p.addCurve(to: CGPoint(x: 14.614, y: 9.525), control1: CGPoint(x: 15, y: 8.199), control2: CGPoint(x: 14.871, y: 8.874)) p.addCurve(to: CGPoint(x: 13.389, y: 11.389), control1: CGPoint(x: 14.334, y: 10.231), control2: CGPoint(x: 13.926, y: 10.852)) p.addCurve(to: CGPoint(x: 11.525, y: 12.614), control1: CGPoint(x: 12.852, y: 11.926), control2: CGPoint(x: 12.231, y: 12.334)) p.addCurve(to: CGPoint(x: 9.5, y: 13), control1: CGPoint(x: 10.874, y: 12.871), control2: CGPoint(x: 10.199, y: 13)) p.addCurve(to: CGPoint(x: 9.144, y: 12.856), control1: CGPoint(x: 9.359, y: 13), control2: CGPoint(x: 9.241, y: 12.952)) p.addCurve(to: CGPoint(x: 9, y: 12.5), control1: CGPoint(x: 9.048, y: 12.759), control2: CGPoint(x: 9, y: 12.641)) p.addLine(to: CGPoint(x: 9, y: 9.707)) p.addLine(to: CGPoint(x: 4.207, y: 14.5)) p.closeSubpath() p.move(to: CGPoint(x: 8.207, y: 4.5)) p.addLine(to: CGPoint(x: 8.5, y: 4.793)) p.addCurve(to: CGPoint(x: 8.793, y: 5.5), control1: CGPoint(x: 8.695, y: 4.988), control2: CGPoint(x: 8.793, y: 5.224)) p.addCurve(to: CGPoint(x: 8.5, y: 6.207), control1: CGPoint(x: 8.793, y: 5.776), control2: CGPoint(x: 8.695, y: 6.012)) p.addLine(to: CGPoint(x: 8.207, y: 6.5)) p.addLine(to: CGPoint(x: 9.854, y: 8.146)) p.addCurve(to: CGPoint(x: 10, y: 8.5), control1: CGPoint(x: 9.951, y: 8.244), control2: CGPoint(x: 10, y: 8.362)) p.addLine(to: CGPoint(x: 10, y: 11.973)) p.addCurve(to: CGPoint(x: 11.156, y: 11.684), control1: CGPoint(x: 10.395, y: 11.929), control2: CGPoint(x: 10.781, y: 11.833)) p.addCurve(to: CGPoint(x: 12.682, y: 10.682), control1: CGPoint(x: 11.734, y: 11.455), control2: CGPoint(x: 12.243, y: 11.121)) p.addCurve(to: CGPoint(x: 13.684, y: 9.156), control1: CGPoint(x: 13.121, y: 10.243), control2: CGPoint(x: 13.455, y: 9.734)) p.addCurve(to: CGPoint(x: 13.996, y: 7.703), control1: CGPoint(x: 13.87, y: 8.687), control2: CGPoint(x: 13.974, y: 8.203)) p.addLine(to: CGPoint(x: 9.5, y: 3.207)) p.addLine(to: CGPoint(x: 8.207, y: 4.5)) p.closeSubpath() p.move(to: CGPoint(x: 3.5, y: 13.793)) p.addLine(to: CGPoint(x: 8.793, y: 8.5)) p.addLine(to: CGPoint(x: 7.5, y: 7.207)) p.addLine(to: CGPoint(x: 2.207, y: 12.5)) p.addLine(to: CGPoint(x: 3.5, y: 13.793)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // AxeIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "axe" (line-round), MIT. https://gentleface.com/icons/axe 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 AxeIcon: ImageVector by lazy { ImageVector.Builder( name = "axe", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M4.207 14.5C4.012 14.695 3.776 14.793 3.5 14.793C3.224 14.793 2.988 14.695 2.793 14.5L1.5 13.207C1.305 13.012 1.207 12.776 1.207 12.5C1.207 12.224 1.305 11.988 1.5 11.793L7.793 5.5L7.5 5.207C7.305 5.012 7.207 4.776 7.207 4.5C7.207 4.224 7.305 3.988 7.5 3.793L8.793 2.5C8.988 2.305 9.224 2.207 9.5 2.207C9.776 2.207 10.012 2.305 10.207 2.5L14.854 7.146C14.951 7.244 15 7.362 15 7.5C15 8.199 14.871 8.874 14.614 9.525C14.334 10.231 13.926 10.852 13.389 11.389C12.852 11.926 12.231 12.334 11.525 12.614C10.874 12.871 10.199 13 9.5 13C9.359 13 9.241 12.952 9.144 12.856C9.048 12.759 9 12.641 9 12.5L9 9.707L4.207 14.5ZM8.207 4.5L8.5 4.793C8.695 4.988 8.793 5.224 8.793 5.5C8.793 5.776 8.695 6.012 8.5 6.207L8.207 6.5L9.854 8.146C9.951 8.244 10 8.362 10 8.5L10 11.973C10.395 11.929 10.781 11.833 11.156 11.684C11.734 11.455 12.243 11.121 12.682 10.682C13.121 10.243 13.455 9.734 13.684 9.156C13.87 8.687 13.974 8.203 13.996 7.703L9.5 3.207L8.207 4.5ZM3.5 13.793L8.793 8.5L7.5 7.207L2.207 12.5L3.5 13.793Z"), fill = SolidColor(Color.Black), ).build() } // Icon(AxeIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "axe" (line-round), MIT. https://gentleface.com/icons/axe import 'package:flutter/widgets.dart'; class AxeIcon extends StatelessWidget { const AxeIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _AxeIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _AxeIconPainter extends CustomPainter { _AxeIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(4.207, 14.5) ..cubicTo(4.012, 14.695, 3.776, 14.793, 3.5, 14.793) ..cubicTo(3.224, 14.793, 2.988, 14.695, 2.793, 14.5) ..lineTo(1.5, 13.207) ..cubicTo(1.305, 13.012, 1.207, 12.776, 1.207, 12.5) ..cubicTo(1.207, 12.224, 1.305, 11.988, 1.5, 11.793) ..lineTo(7.793, 5.5) ..lineTo(7.5, 5.207) ..cubicTo(7.305, 5.012, 7.207, 4.776, 7.207, 4.5) ..cubicTo(7.207, 4.224, 7.305, 3.988, 7.5, 3.793) ..lineTo(8.793, 2.5) ..cubicTo(8.988, 2.305, 9.224, 2.207, 9.5, 2.207) ..cubicTo(9.776, 2.207, 10.012, 2.305, 10.207, 2.5) ..lineTo(14.854, 7.146) ..cubicTo(14.951, 7.244, 15, 7.362, 15, 7.5) ..cubicTo(15, 8.199, 14.871, 8.874, 14.614, 9.525) ..cubicTo(14.334, 10.231, 13.926, 10.852, 13.389, 11.389) ..cubicTo(12.852, 11.926, 12.231, 12.334, 11.525, 12.614) ..cubicTo(10.874, 12.871, 10.199, 13, 9.5, 13) ..cubicTo(9.359, 13, 9.241, 12.952, 9.144, 12.856) ..cubicTo(9.048, 12.759, 9, 12.641, 9, 12.5) ..lineTo(9, 9.707) ..lineTo(4.207, 14.5) ..close() ..moveTo(8.207, 4.5) ..lineTo(8.5, 4.793) ..cubicTo(8.695, 4.988, 8.793, 5.224, 8.793, 5.5) ..cubicTo(8.793, 5.776, 8.695, 6.012, 8.5, 6.207) ..lineTo(8.207, 6.5) ..lineTo(9.854, 8.146) ..cubicTo(9.951, 8.244, 10, 8.362, 10, 8.5) ..lineTo(10, 11.973) ..cubicTo(10.395, 11.929, 10.781, 11.833, 11.156, 11.684) ..cubicTo(11.734, 11.455, 12.243, 11.121, 12.682, 10.682) ..cubicTo(13.121, 10.243, 13.455, 9.734, 13.684, 9.156) ..cubicTo(13.87, 8.687, 13.974, 8.203, 13.996, 7.703) ..lineTo(9.5, 3.207) ..lineTo(8.207, 4.5) ..close() ..moveTo(3.5, 13.793) ..lineTo(8.793, 8.5) ..lineTo(7.5, 7.207) ..lineTo(2.207, 12.5) ..lineTo(3.5, 13.793) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_AxeIconPainter old) => old.color != color; } ```