# radical icon Radical. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/radical - Category: Math & symbols - Use it for: square root, radical, sqrt - Tags: square-root, root, radical, sqrt, math, formula, operator - Component name: RadicalIcon - Added: 2026-10-15 ## 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/radical.svg · PNG https://gentleface.com/png/line-round/16/radical.png · https://gentleface.com/png/line-round/32/radical.png · https://gentleface.com/png/line-round/48/radical.png - line-soft: https://gentleface.com/svg/line-soft/16/radical.svg · PNG https://gentleface.com/png/line-soft/16/radical.png · https://gentleface.com/png/line-soft/32/radical.png · https://gentleface.com/png/line-soft/48/radical.png - line-sharp: https://gentleface.com/svg/line-sharp/16/radical.svg · PNG https://gentleface.com/png/line-sharp/16/radical.png · https://gentleface.com/png/line-sharp/32/radical.png · https://gentleface.com/png/line-sharp/48/radical.png - solid-round: https://gentleface.com/svg/solid-round/16/radical.svg · PNG https://gentleface.com/png/solid-round/16/radical.png · https://gentleface.com/png/solid-round/32/radical.png · https://gentleface.com/png/solid-round/48/radical.png - solid-soft: https://gentleface.com/svg/solid-soft/16/radical.svg · PNG https://gentleface.com/png/solid-soft/16/radical.png · https://gentleface.com/png/solid-soft/32/radical.png · https://gentleface.com/png/solid-soft/48/radical.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/radical.svg · PNG https://gentleface.com/png/solid-sharp/16/radical.png · https://gentleface.com/png/solid-sharp/32/radical.png · https://gentleface.com/png/solid-sharp/48/radical.png The SVG of every style: https://gentleface.com/icons/radical.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 "radical" (line-round), MIT. https://gentleface.com/icons/radical import type { SVGProps } from 'react'; export function RadicalIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "radical" (line-round), MIT. https://gentleface.com/icons/radical. Takes the text color. */ .icon-radical { 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.763 8.074C2.843 8.124 2.904 8.191 2.947 8.276L4.5 11.382L9.053 2.276C9.096 2.191 9.157 2.124 9.237 2.074C9.317 2.025 9.404 2 9.5 2L13.5 2C13.641 2 13.759 2.048 13.856 2.144C13.952 2.241 14 2.359 14 2.5C14 2.641 13.952 2.759 13.856 2.856C13.759 2.952 13.641 3 13.5 3L9.809 3L4.947 12.724C4.898 12.823 4.823 12.898 4.724 12.947C4.6 13.009 4.473 13.018 4.342 12.974C4.211 12.931 4.115 12.847 4.053 12.724L2.191 9L1.5 9C1.359 9 1.241 8.952 1.144 8.856C1.048 8.759 1 8.641 1 8.5C1 8.359 1.048 8.241 1.144 8.144C1.241 8.048 1.359 8 1.5 8L2.5 8C2.596 8 2.683 8.025 2.763 8.074Z'/%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.763 8.074C2.843 8.124 2.904 8.191 2.947 8.276L4.5 11.382L9.053 2.276C9.096 2.191 9.157 2.124 9.237 2.074C9.317 2.025 9.404 2 9.5 2L13.5 2C13.641 2 13.759 2.048 13.856 2.144C13.952 2.241 14 2.359 14 2.5C14 2.641 13.952 2.759 13.856 2.856C13.759 2.952 13.641 3 13.5 3L9.809 3L4.947 12.724C4.898 12.823 4.823 12.898 4.724 12.947C4.6 13.009 4.473 13.018 4.342 12.974C4.211 12.931 4.115 12.847 4.053 12.724L2.191 9L1.5 9C1.359 9 1.241 8.952 1.144 8.856C1.048 8.759 1 8.641 1 8.5C1 8.359 1.048 8.241 1.144 8.144C1.241 8.048 1.359 8 1.5 8L2.5 8C2.596 8 2.683 8.025 2.763 8.074Z'/%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.763 8.074C2.843 8.124 2.904 8.191 2.947 8.276L4.5 11.382L9.053 2.276C9.096 2.191 9.157 2.124 9.237 2.074C9.317 2.025 9.404 2 9.5 2L13.5 2C13.641 2 13.759 2.048 13.856 2.144C13.952 2.241 14 2.359 14 2.5C14 2.641 13.952 2.759 13.856 2.856C13.759 2.952 13.641 3 13.5 3L9.809 3L4.947 12.724C4.898 12.823 4.823 12.898 4.724 12.947C4.6 13.009 4.473 13.018 4.342 12.974C4.211 12.931 4.115 12.847 4.053 12.724L2.191 9L1.5 9C1.359 9 1.241 8.952 1.144 8.856C1.048 8.759 1 8.641 1 8.5C1 8.359 1.048 8.241 1.144 8.144C1.241 8.048 1.359 8 1.5 8L2.5 8C2.596 8 2.683 8.025 2.763 8.074Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "radical" (line-round), MIT. https://gentleface.com/icons/radical import SwiftUI struct RadicalIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 2.763, y: 8.074)) p.addCurve(to: CGPoint(x: 2.947, y: 8.276), control1: CGPoint(x: 2.843, y: 8.124), control2: CGPoint(x: 2.904, y: 8.191)) p.addLine(to: CGPoint(x: 4.5, y: 11.382)) p.addLine(to: CGPoint(x: 9.053, y: 2.276)) p.addCurve(to: CGPoint(x: 9.237, y: 2.074), control1: CGPoint(x: 9.096, y: 2.191), control2: CGPoint(x: 9.157, y: 2.124)) p.addCurve(to: CGPoint(x: 9.5, y: 2), control1: CGPoint(x: 9.317, y: 2.025), control2: CGPoint(x: 9.404, y: 2)) p.addLine(to: CGPoint(x: 13.5, y: 2)) p.addCurve(to: CGPoint(x: 13.856, y: 2.144), control1: CGPoint(x: 13.641, y: 2), control2: CGPoint(x: 13.759, y: 2.048)) p.addCurve(to: CGPoint(x: 14, y: 2.5), control1: CGPoint(x: 13.952, y: 2.241), control2: CGPoint(x: 14, y: 2.359)) p.addCurve(to: CGPoint(x: 13.856, y: 2.856), control1: CGPoint(x: 14, y: 2.641), control2: CGPoint(x: 13.952, y: 2.759)) p.addCurve(to: CGPoint(x: 13.5, y: 3), control1: CGPoint(x: 13.759, y: 2.952), control2: CGPoint(x: 13.641, y: 3)) p.addLine(to: CGPoint(x: 9.809, y: 3)) p.addLine(to: CGPoint(x: 4.947, y: 12.724)) p.addCurve(to: CGPoint(x: 4.724, y: 12.947), control1: CGPoint(x: 4.898, y: 12.823), control2: CGPoint(x: 4.823, y: 12.898)) p.addCurve(to: CGPoint(x: 4.342, y: 12.974), control1: CGPoint(x: 4.6, y: 13.009), control2: CGPoint(x: 4.473, y: 13.018)) p.addCurve(to: CGPoint(x: 4.053, y: 12.724), control1: CGPoint(x: 4.211, y: 12.931), control2: CGPoint(x: 4.115, y: 12.847)) p.addLine(to: CGPoint(x: 2.191, y: 9)) p.addLine(to: CGPoint(x: 1.5, y: 9)) p.addCurve(to: CGPoint(x: 1.144, y: 8.856), control1: CGPoint(x: 1.359, y: 9), control2: CGPoint(x: 1.241, y: 8.952)) p.addCurve(to: CGPoint(x: 1, y: 8.5), control1: CGPoint(x: 1.048, y: 8.759), control2: CGPoint(x: 1, y: 8.641)) p.addCurve(to: CGPoint(x: 1.144, y: 8.144), control1: CGPoint(x: 1, y: 8.359), control2: CGPoint(x: 1.048, y: 8.241)) p.addCurve(to: CGPoint(x: 1.5, y: 8), control1: CGPoint(x: 1.241, y: 8.048), control2: CGPoint(x: 1.359, y: 8)) p.addLine(to: CGPoint(x: 2.5, y: 8)) p.addCurve(to: CGPoint(x: 2.763, y: 8.074), control1: CGPoint(x: 2.596, y: 8), control2: CGPoint(x: 2.683, y: 8.025)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // RadicalIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "radical" (line-round), MIT. https://gentleface.com/icons/radical 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 RadicalIcon: ImageVector by lazy { ImageVector.Builder( name = "radical", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M2.763 8.074C2.843 8.124 2.904 8.191 2.947 8.276L4.5 11.382L9.053 2.276C9.096 2.191 9.157 2.124 9.237 2.074C9.317 2.025 9.404 2 9.5 2L13.5 2C13.641 2 13.759 2.048 13.856 2.144C13.952 2.241 14 2.359 14 2.5C14 2.641 13.952 2.759 13.856 2.856C13.759 2.952 13.641 3 13.5 3L9.809 3L4.947 12.724C4.898 12.823 4.823 12.898 4.724 12.947C4.6 13.009 4.473 13.018 4.342 12.974C4.211 12.931 4.115 12.847 4.053 12.724L2.191 9L1.5 9C1.359 9 1.241 8.952 1.144 8.856C1.048 8.759 1 8.641 1 8.5C1 8.359 1.048 8.241 1.144 8.144C1.241 8.048 1.359 8 1.5 8L2.5 8C2.596 8 2.683 8.025 2.763 8.074Z"), fill = SolidColor(Color.Black), ).build() } // Icon(RadicalIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "radical" (line-round), MIT. https://gentleface.com/icons/radical import 'package:flutter/widgets.dart'; class RadicalIcon extends StatelessWidget { const RadicalIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _RadicalIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _RadicalIconPainter extends CustomPainter { _RadicalIconPainter(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.763, 8.074) ..cubicTo(2.843, 8.124, 2.904, 8.191, 2.947, 8.276) ..lineTo(4.5, 11.382) ..lineTo(9.053, 2.276) ..cubicTo(9.096, 2.191, 9.157, 2.124, 9.237, 2.074) ..cubicTo(9.317, 2.025, 9.404, 2, 9.5, 2) ..lineTo(13.5, 2) ..cubicTo(13.641, 2, 13.759, 2.048, 13.856, 2.144) ..cubicTo(13.952, 2.241, 14, 2.359, 14, 2.5) ..cubicTo(14, 2.641, 13.952, 2.759, 13.856, 2.856) ..cubicTo(13.759, 2.952, 13.641, 3, 13.5, 3) ..lineTo(9.809, 3) ..lineTo(4.947, 12.724) ..cubicTo(4.898, 12.823, 4.823, 12.898, 4.724, 12.947) ..cubicTo(4.6, 13.009, 4.473, 13.018, 4.342, 12.974) ..cubicTo(4.211, 12.931, 4.115, 12.847, 4.053, 12.724) ..lineTo(2.191, 9) ..lineTo(1.5, 9) ..cubicTo(1.359, 9, 1.241, 8.952, 1.144, 8.856) ..cubicTo(1.048, 8.759, 1, 8.641, 1, 8.5) ..cubicTo(1, 8.359, 1.048, 8.241, 1.144, 8.144) ..cubicTo(1.241, 8.048, 1.359, 8, 1.5, 8) ..lineTo(2.5, 8) ..cubicTo(2.596, 8, 2.683, 8.025, 2.763, 8.074) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_RadicalIconPainter old) => old.color != color; } ```