# tilde icon Tilde. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/tilde - Category: Math & symbols - Use it for: tilde, approximately, approx - Tags: tilde - Component name: TildeIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { TildeIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## Alternatives - `equal-approximately`: the ≈ operator in an equation (approximately-equal) ## Also fits - approximately equal: a bare tilde ~ for approximately (approximately) ## 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/tilde.svg · PNG https://gentleface.com/png/line-round/16/tilde.png · https://gentleface.com/png/line-round/32/tilde.png · https://gentleface.com/png/line-round/48/tilde.png - line-soft: https://gentleface.com/svg/line-soft/16/tilde.svg · PNG https://gentleface.com/png/line-soft/16/tilde.png · https://gentleface.com/png/line-soft/32/tilde.png · https://gentleface.com/png/line-soft/48/tilde.png - line-sharp: https://gentleface.com/svg/line-sharp/16/tilde.svg · PNG https://gentleface.com/png/line-sharp/16/tilde.png · https://gentleface.com/png/line-sharp/32/tilde.png · https://gentleface.com/png/line-sharp/48/tilde.png - solid-round: https://gentleface.com/svg/solid-round/16/tilde.svg · PNG https://gentleface.com/png/solid-round/16/tilde.png · https://gentleface.com/png/solid-round/32/tilde.png · https://gentleface.com/png/solid-round/48/tilde.png - solid-soft: https://gentleface.com/svg/solid-soft/16/tilde.svg · PNG https://gentleface.com/png/solid-soft/16/tilde.png · https://gentleface.com/png/solid-soft/32/tilde.png · https://gentleface.com/png/solid-soft/48/tilde.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/tilde.svg · PNG https://gentleface.com/png/solid-sharp/16/tilde.png · https://gentleface.com/png/solid-sharp/32/tilde.png · https://gentleface.com/png/solid-sharp/48/tilde.png The SVG of every style: https://gentleface.com/icons/tilde.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 "tilde" (line-round), MIT. https://gentleface.com/icons/tilde import type { SVGProps } from 'react'; export function TildeIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "tilde" (line-round), MIT. https://gentleface.com/icons/tilde. Takes the text color. */ .icon-tilde { 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='M8.397 8.66C7.972 8.434 7.583 8.178 7.229 7.891C6.874 7.604 6.54 7.351 6.225 7.132C5.91 6.913 5.564 6.804 5.187 6.804C4.683 6.804 4.282 6.985 3.983 7.347C3.684 7.71 3.518 8.208 3.487 8.842L2 8.842C2.031 7.574 2.338 6.638 2.921 6.034C3.503 5.43 4.235 5.128 5.116 5.128C5.683 5.128 6.178 5.241 6.603 5.468C7.028 5.695 7.417 5.951 7.771 6.238C8.126 6.525 8.46 6.777 8.775 6.996C9.09 7.215 9.436 7.325 9.813 7.325C10.332 7.325 10.742 7.14 11.041 6.77C11.34 6.4 11.497 5.898 11.513 5.264L13 5.264C12.969 6.532 12.666 7.472 12.091 8.083C11.517 8.694 10.781 9 9.884 9C9.317 9 8.822 8.887 8.397 8.66Z'/%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='M8.397 8.66C7.972 8.434 7.583 8.178 7.229 7.891C6.874 7.604 6.54 7.351 6.225 7.132C5.91 6.913 5.564 6.804 5.187 6.804C4.683 6.804 4.282 6.985 3.983 7.347C3.684 7.71 3.518 8.208 3.487 8.842L2 8.842C2.031 7.574 2.338 6.638 2.921 6.034C3.503 5.43 4.235 5.128 5.116 5.128C5.683 5.128 6.178 5.241 6.603 5.468C7.028 5.695 7.417 5.951 7.771 6.238C8.126 6.525 8.46 6.777 8.775 6.996C9.09 7.215 9.436 7.325 9.813 7.325C10.332 7.325 10.742 7.14 11.041 6.77C11.34 6.4 11.497 5.898 11.513 5.264L13 5.264C12.969 6.532 12.666 7.472 12.091 8.083C11.517 8.694 10.781 9 9.884 9C9.317 9 8.822 8.887 8.397 8.66Z'/%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='M8.397 8.66C7.972 8.434 7.583 8.178 7.229 7.891C6.874 7.604 6.54 7.351 6.225 7.132C5.91 6.913 5.564 6.804 5.187 6.804C4.683 6.804 4.282 6.985 3.983 7.347C3.684 7.71 3.518 8.208 3.487 8.842L2 8.842C2.031 7.574 2.338 6.638 2.921 6.034C3.503 5.43 4.235 5.128 5.116 5.128C5.683 5.128 6.178 5.241 6.603 5.468C7.028 5.695 7.417 5.951 7.771 6.238C8.126 6.525 8.46 6.777 8.775 6.996C9.09 7.215 9.436 7.325 9.813 7.325C10.332 7.325 10.742 7.14 11.041 6.77C11.34 6.4 11.497 5.898 11.513 5.264L13 5.264C12.969 6.532 12.666 7.472 12.091 8.083C11.517 8.694 10.781 9 9.884 9C9.317 9 8.822 8.887 8.397 8.66Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "tilde" (line-round), MIT. https://gentleface.com/icons/tilde import SwiftUI struct TildeIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 8.397, y: 8.66)) p.addCurve(to: CGPoint(x: 7.229, y: 7.891), control1: CGPoint(x: 7.972, y: 8.434), control2: CGPoint(x: 7.583, y: 8.178)) p.addCurve(to: CGPoint(x: 6.225, y: 7.132), control1: CGPoint(x: 6.874, y: 7.604), control2: CGPoint(x: 6.54, y: 7.351)) p.addCurve(to: CGPoint(x: 5.187, y: 6.804), control1: CGPoint(x: 5.91, y: 6.913), control2: CGPoint(x: 5.564, y: 6.804)) p.addCurve(to: CGPoint(x: 3.983, y: 7.347), control1: CGPoint(x: 4.683, y: 6.804), control2: CGPoint(x: 4.282, y: 6.985)) p.addCurve(to: CGPoint(x: 3.487, y: 8.842), control1: CGPoint(x: 3.684, y: 7.71), control2: CGPoint(x: 3.518, y: 8.208)) p.addLine(to: CGPoint(x: 2, y: 8.842)) p.addCurve(to: CGPoint(x: 2.921, y: 6.034), control1: CGPoint(x: 2.031, y: 7.574), control2: CGPoint(x: 2.338, y: 6.638)) p.addCurve(to: CGPoint(x: 5.116, y: 5.128), control1: CGPoint(x: 3.503, y: 5.43), control2: CGPoint(x: 4.235, y: 5.128)) p.addCurve(to: CGPoint(x: 6.603, y: 5.468), control1: CGPoint(x: 5.683, y: 5.128), control2: CGPoint(x: 6.178, y: 5.241)) p.addCurve(to: CGPoint(x: 7.771, y: 6.238), control1: CGPoint(x: 7.028, y: 5.695), control2: CGPoint(x: 7.417, y: 5.951)) p.addCurve(to: CGPoint(x: 8.775, y: 6.996), control1: CGPoint(x: 8.126, y: 6.525), control2: CGPoint(x: 8.46, y: 6.777)) p.addCurve(to: CGPoint(x: 9.813, y: 7.325), control1: CGPoint(x: 9.09, y: 7.215), control2: CGPoint(x: 9.436, y: 7.325)) p.addCurve(to: CGPoint(x: 11.041, y: 6.77), control1: CGPoint(x: 10.332, y: 7.325), control2: CGPoint(x: 10.742, y: 7.14)) p.addCurve(to: CGPoint(x: 11.513, y: 5.264), control1: CGPoint(x: 11.34, y: 6.4), control2: CGPoint(x: 11.497, y: 5.898)) p.addLine(to: CGPoint(x: 13, y: 5.264)) p.addCurve(to: CGPoint(x: 12.091, y: 8.083), control1: CGPoint(x: 12.969, y: 6.532), control2: CGPoint(x: 12.666, y: 7.472)) p.addCurve(to: CGPoint(x: 9.884, y: 9), control1: CGPoint(x: 11.517, y: 8.694), control2: CGPoint(x: 10.781, y: 9)) p.addCurve(to: CGPoint(x: 8.397, y: 8.66), control1: CGPoint(x: 9.317, y: 9), control2: CGPoint(x: 8.822, y: 8.887)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // TildeIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "tilde" (line-round), MIT. https://gentleface.com/icons/tilde 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 TildeIcon: ImageVector by lazy { ImageVector.Builder( name = "tilde", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M8.397 8.66C7.972 8.434 7.583 8.178 7.229 7.891C6.874 7.604 6.54 7.351 6.225 7.132C5.91 6.913 5.564 6.804 5.187 6.804C4.683 6.804 4.282 6.985 3.983 7.347C3.684 7.71 3.518 8.208 3.487 8.842L2 8.842C2.031 7.574 2.338 6.638 2.921 6.034C3.503 5.43 4.235 5.128 5.116 5.128C5.683 5.128 6.178 5.241 6.603 5.468C7.028 5.695 7.417 5.951 7.771 6.238C8.126 6.525 8.46 6.777 8.775 6.996C9.09 7.215 9.436 7.325 9.813 7.325C10.332 7.325 10.742 7.14 11.041 6.77C11.34 6.4 11.497 5.898 11.513 5.264L13 5.264C12.969 6.532 12.666 7.472 12.091 8.083C11.517 8.694 10.781 9 9.884 9C9.317 9 8.822 8.887 8.397 8.66Z"), fill = SolidColor(Color.Black), ).build() } // Icon(TildeIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "tilde" (line-round), MIT. https://gentleface.com/icons/tilde import 'package:flutter/widgets.dart'; class TildeIcon extends StatelessWidget { const TildeIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _TildeIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _TildeIconPainter extends CustomPainter { _TildeIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(8.397, 8.66) ..cubicTo(7.972, 8.434, 7.583, 8.178, 7.229, 7.891) ..cubicTo(6.874, 7.604, 6.54, 7.351, 6.225, 7.132) ..cubicTo(5.91, 6.913, 5.564, 6.804, 5.187, 6.804) ..cubicTo(4.683, 6.804, 4.282, 6.985, 3.983, 7.347) ..cubicTo(3.684, 7.71, 3.518, 8.208, 3.487, 8.842) ..lineTo(2, 8.842) ..cubicTo(2.031, 7.574, 2.338, 6.638, 2.921, 6.034) ..cubicTo(3.503, 5.43, 4.235, 5.128, 5.116, 5.128) ..cubicTo(5.683, 5.128, 6.178, 5.241, 6.603, 5.468) ..cubicTo(7.028, 5.695, 7.417, 5.951, 7.771, 6.238) ..cubicTo(8.126, 6.525, 8.46, 6.777, 8.775, 6.996) ..cubicTo(9.09, 7.215, 9.436, 7.325, 9.813, 7.325) ..cubicTo(10.332, 7.325, 10.742, 7.14, 11.041, 6.77) ..cubicTo(11.34, 6.4, 11.497, 5.898, 11.513, 5.264) ..lineTo(13, 5.264) ..cubicTo(12.969, 6.532, 12.666, 7.472, 12.091, 8.083) ..cubicTo(11.517, 8.694, 10.781, 9, 9.884, 9) ..cubicTo(9.317, 9, 8.822, 8.887, 8.397, 8.66) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_TildeIconPainter old) => old.color != color; } ```