# equal icon Equal. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/equal - Category: Math & symbols - Use it for: equal, equals, equality - Tags: equal, equals, equality, same, result, operator, math - Family: equal-not - Component name: EqualIcon - Added: 2026-10-14 ## Also fits - congruent: plain equality (equal) ## 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/equal.svg · PNG https://gentleface.com/png/line-round/16/equal.png · https://gentleface.com/png/line-round/32/equal.png · https://gentleface.com/png/line-round/48/equal.png - line-soft: https://gentleface.com/svg/line-soft/16/equal.svg · PNG https://gentleface.com/png/line-soft/16/equal.png · https://gentleface.com/png/line-soft/32/equal.png · https://gentleface.com/png/line-soft/48/equal.png - line-sharp: https://gentleface.com/svg/line-sharp/16/equal.svg · PNG https://gentleface.com/png/line-sharp/16/equal.png · https://gentleface.com/png/line-sharp/32/equal.png · https://gentleface.com/png/line-sharp/48/equal.png - solid-round: https://gentleface.com/svg/solid-round/16/equal.svg · PNG https://gentleface.com/png/solid-round/16/equal.png · https://gentleface.com/png/solid-round/32/equal.png · https://gentleface.com/png/solid-round/48/equal.png - solid-soft: https://gentleface.com/svg/solid-soft/16/equal.svg · PNG https://gentleface.com/png/solid-soft/16/equal.png · https://gentleface.com/png/solid-soft/32/equal.png · https://gentleface.com/png/solid-soft/48/equal.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/equal.svg · PNG https://gentleface.com/png/solid-sharp/16/equal.png · https://gentleface.com/png/solid-sharp/32/equal.png · https://gentleface.com/png/solid-sharp/48/equal.png The SVG of every style: https://gentleface.com/icons/equal.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 "equal" (line-round), MIT. https://gentleface.com/icons/equal import type { SVGProps } from 'react'; export function EqualIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "equal" (line-round), MIT. https://gentleface.com/icons/equal. Takes the text color. */ .icon-equal { 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='M2.144 5.856C2.048 5.759 2 5.641 2 5.5C2 5.359 2.048 5.241 2.144 5.144C2.241 5.048 2.359 5 2.5 5L12.5 5C12.641 5 12.759 5.048 12.856 5.144C12.952 5.241 13 5.359 13 5.5C13 5.641 12.952 5.759 12.856 5.856C12.759 5.952 12.641 6 12.5 6L2.5 6C2.359 6 2.241 5.952 2.144 5.856ZM2.144 9.856C2.048 9.759 2 9.641 2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L12.5 9C12.641 9 12.759 9.048 12.856 9.144C12.952 9.241 13 9.359 13 9.5C13 9.641 12.952 9.759 12.856 9.856C12.759 9.952 12.641 10 12.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856Z'/%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='M2.144 5.856C2.048 5.759 2 5.641 2 5.5C2 5.359 2.048 5.241 2.144 5.144C2.241 5.048 2.359 5 2.5 5L12.5 5C12.641 5 12.759 5.048 12.856 5.144C12.952 5.241 13 5.359 13 5.5C13 5.641 12.952 5.759 12.856 5.856C12.759 5.952 12.641 6 12.5 6L2.5 6C2.359 6 2.241 5.952 2.144 5.856ZM2.144 9.856C2.048 9.759 2 9.641 2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L12.5 9C12.641 9 12.759 9.048 12.856 9.144C12.952 9.241 13 9.359 13 9.5C13 9.641 12.952 9.759 12.856 9.856C12.759 9.952 12.641 10 12.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856Z'/%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='M2.144 5.856C2.048 5.759 2 5.641 2 5.5C2 5.359 2.048 5.241 2.144 5.144C2.241 5.048 2.359 5 2.5 5L12.5 5C12.641 5 12.759 5.048 12.856 5.144C12.952 5.241 13 5.359 13 5.5C13 5.641 12.952 5.759 12.856 5.856C12.759 5.952 12.641 6 12.5 6L2.5 6C2.359 6 2.241 5.952 2.144 5.856ZM2.144 9.856C2.048 9.759 2 9.641 2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L12.5 9C12.641 9 12.759 9.048 12.856 9.144C12.952 9.241 13 9.359 13 9.5C13 9.641 12.952 9.759 12.856 9.856C12.759 9.952 12.641 10 12.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "equal" (line-round), MIT. https://gentleface.com/icons/equal import SwiftUI struct EqualIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 2.144, y: 5.856)) p.addCurve(to: CGPoint(x: 2, y: 5.5), control1: CGPoint(x: 2.048, y: 5.759), control2: CGPoint(x: 2, y: 5.641)) p.addCurve(to: CGPoint(x: 2.144, y: 5.144), control1: CGPoint(x: 2, y: 5.359), control2: CGPoint(x: 2.048, y: 5.241)) p.addCurve(to: CGPoint(x: 2.5, y: 5), control1: CGPoint(x: 2.241, y: 5.048), control2: CGPoint(x: 2.359, y: 5)) p.addLine(to: CGPoint(x: 12.5, y: 5)) p.addCurve(to: CGPoint(x: 12.856, y: 5.144), control1: CGPoint(x: 12.641, y: 5), control2: CGPoint(x: 12.759, y: 5.048)) p.addCurve(to: CGPoint(x: 13, y: 5.5), control1: CGPoint(x: 12.952, y: 5.241), control2: CGPoint(x: 13, y: 5.359)) p.addCurve(to: CGPoint(x: 12.856, y: 5.856), control1: CGPoint(x: 13, y: 5.641), control2: CGPoint(x: 12.952, y: 5.759)) p.addCurve(to: CGPoint(x: 12.5, y: 6), control1: CGPoint(x: 12.759, y: 5.952), control2: CGPoint(x: 12.641, y: 6)) p.addLine(to: CGPoint(x: 2.5, y: 6)) p.addCurve(to: CGPoint(x: 2.144, y: 5.856), control1: CGPoint(x: 2.359, y: 6), control2: CGPoint(x: 2.241, y: 5.952)) p.closeSubpath() p.move(to: CGPoint(x: 2.144, y: 9.856)) p.addCurve(to: CGPoint(x: 2, y: 9.5), control1: CGPoint(x: 2.048, y: 9.759), control2: CGPoint(x: 2, y: 9.641)) p.addCurve(to: CGPoint(x: 2.144, y: 9.144), control1: CGPoint(x: 2, y: 9.359), control2: CGPoint(x: 2.048, y: 9.241)) p.addCurve(to: CGPoint(x: 2.5, y: 9), control1: CGPoint(x: 2.241, y: 9.048), control2: CGPoint(x: 2.359, y: 9)) p.addLine(to: CGPoint(x: 12.5, y: 9)) p.addCurve(to: CGPoint(x: 12.856, y: 9.144), control1: CGPoint(x: 12.641, y: 9), control2: CGPoint(x: 12.759, y: 9.048)) p.addCurve(to: CGPoint(x: 13, y: 9.5), control1: CGPoint(x: 12.952, y: 9.241), control2: CGPoint(x: 13, y: 9.359)) p.addCurve(to: CGPoint(x: 12.856, y: 9.856), control1: CGPoint(x: 13, y: 9.641), control2: CGPoint(x: 12.952, y: 9.759)) p.addCurve(to: CGPoint(x: 12.5, y: 10), control1: CGPoint(x: 12.759, y: 9.952), control2: CGPoint(x: 12.641, y: 10)) p.addLine(to: CGPoint(x: 2.5, y: 10)) p.addCurve(to: CGPoint(x: 2.144, y: 9.856), control1: CGPoint(x: 2.359, y: 10), control2: CGPoint(x: 2.241, y: 9.952)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // EqualIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "equal" (line-round), MIT. https://gentleface.com/icons/equal 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 EqualIcon: ImageVector by lazy { ImageVector.Builder( name = "equal", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M2.144 5.856C2.048 5.759 2 5.641 2 5.5C2 5.359 2.048 5.241 2.144 5.144C2.241 5.048 2.359 5 2.5 5L12.5 5C12.641 5 12.759 5.048 12.856 5.144C12.952 5.241 13 5.359 13 5.5C13 5.641 12.952 5.759 12.856 5.856C12.759 5.952 12.641 6 12.5 6L2.5 6C2.359 6 2.241 5.952 2.144 5.856ZM2.144 9.856C2.048 9.759 2 9.641 2 9.5C2 9.359 2.048 9.241 2.144 9.144C2.241 9.048 2.359 9 2.5 9L12.5 9C12.641 9 12.759 9.048 12.856 9.144C12.952 9.241 13 9.359 13 9.5C13 9.641 12.952 9.759 12.856 9.856C12.759 9.952 12.641 10 12.5 10L2.5 10C2.359 10 2.241 9.952 2.144 9.856Z"), fill = SolidColor(Color.Black), ).build() } // Icon(EqualIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "equal" (line-round), MIT. https://gentleface.com/icons/equal import 'package:flutter/widgets.dart'; class EqualIcon extends StatelessWidget { const EqualIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _EqualIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _EqualIconPainter extends CustomPainter { _EqualIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(2.144, 5.856) ..cubicTo(2.048, 5.759, 2, 5.641, 2, 5.5) ..cubicTo(2, 5.359, 2.048, 5.241, 2.144, 5.144) ..cubicTo(2.241, 5.048, 2.359, 5, 2.5, 5) ..lineTo(12.5, 5) ..cubicTo(12.641, 5, 12.759, 5.048, 12.856, 5.144) ..cubicTo(12.952, 5.241, 13, 5.359, 13, 5.5) ..cubicTo(13, 5.641, 12.952, 5.759, 12.856, 5.856) ..cubicTo(12.759, 5.952, 12.641, 6, 12.5, 6) ..lineTo(2.5, 6) ..cubicTo(2.359, 6, 2.241, 5.952, 2.144, 5.856) ..close() ..moveTo(2.144, 9.856) ..cubicTo(2.048, 9.759, 2, 9.641, 2, 9.5) ..cubicTo(2, 9.359, 2.048, 9.241, 2.144, 9.144) ..cubicTo(2.241, 9.048, 2.359, 9, 2.5, 9) ..lineTo(12.5, 9) ..cubicTo(12.641, 9, 12.759, 9.048, 12.856, 9.144) ..cubicTo(12.952, 9.241, 13, 9.359, 13, 9.5) ..cubicTo(13, 9.641, 12.952, 9.759, 12.856, 9.856) ..cubicTo(12.759, 9.952, 12.641, 10, 12.5, 10) ..lineTo(2.5, 10) ..cubicTo(2.359, 10, 2.241, 9.952, 2.144, 9.856) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_EqualIconPainter old) => old.color != color; } ```