# contrast icon Contrast. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/contrast - Category: Accessibility - Use it for: contrast, high contrast, high contrast mode, increase contrast - Tags: contrast, high-contrast, half, circle, display, theme, adjust - Component name: ContrastIcon - Added: 2026-10-15 ## Alternatives - `sun-dim`: brightness rather than contrast - `sun-moon`: a light or dark theme rather than contrast ## Also fits - brightness: contrast rather than brightness ## Not for - theme (use `sun-moon`): the half-filled circle means contrast, not theme - in progress (use `circle-progress`): the half-filled circle means contrast - saturation (use `droplet-half`): the half-filled circle means contrast (contrast) ## 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/contrast.svg · PNG https://gentleface.com/png/line-round/16/contrast.png · https://gentleface.com/png/line-round/32/contrast.png · https://gentleface.com/png/line-round/48/contrast.png - line-soft: https://gentleface.com/svg/line-soft/16/contrast.svg · PNG https://gentleface.com/png/line-soft/16/contrast.png · https://gentleface.com/png/line-soft/32/contrast.png · https://gentleface.com/png/line-soft/48/contrast.png - line-sharp: https://gentleface.com/svg/line-sharp/16/contrast.svg · PNG https://gentleface.com/png/line-sharp/16/contrast.png · https://gentleface.com/png/line-sharp/32/contrast.png · https://gentleface.com/png/line-sharp/48/contrast.png - solid-round: https://gentleface.com/svg/solid-round/16/contrast.svg · PNG https://gentleface.com/png/solid-round/16/contrast.png · https://gentleface.com/png/solid-round/32/contrast.png · https://gentleface.com/png/solid-round/48/contrast.png - solid-soft: https://gentleface.com/svg/solid-soft/16/contrast.svg · PNG https://gentleface.com/png/solid-soft/16/contrast.png · https://gentleface.com/png/solid-soft/32/contrast.png · https://gentleface.com/png/solid-soft/48/contrast.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/contrast.svg · PNG https://gentleface.com/png/solid-sharp/16/contrast.png · https://gentleface.com/png/solid-sharp/32/contrast.png · https://gentleface.com/png/solid-sharp/48/contrast.png The SVG of every style: https://gentleface.com/icons/contrast.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 "contrast" (line-round), MIT. https://gentleface.com/icons/contrast import type { SVGProps } from 'react'; export function ContrastIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "contrast" (line-round), MIT. https://gentleface.com/icons/contrast. Takes the text color. */ .icon-contrast { 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='M10.584 1.495L10.585 1.495C11.483 1.852 12.274 2.373 12.957 3.057L12.957 3.058C13.637 3.74 14.154 4.528 14.509 5.423C14.836 6.251 15 7.11 15 8C15 8.89 14.836 9.749 14.509 10.577C14.154 11.471 13.638 12.259 12.96 12.94L12.95 12.95L12.941 12.959C12.938 12.961 12.936 12.964 12.933 12.966C12.257 13.64 11.471 14.154 10.577 14.509C9.749 14.836 8.89 15 8 15C7.11 15 6.251 14.836 5.423 14.509C4.525 14.153 3.734 13.633 3.05 12.95C2.367 12.266 1.847 11.475 1.491 10.577C1.164 9.749 1 8.89 1 8C1 7.11 1.164 6.251 1.491 5.423C1.847 4.525 2.367 3.734 3.05 3.05C3.734 2.367 4.525 1.847 5.423 1.491C6.251 1.164 7.11 1 8 1C8.893 1 9.754 1.165 10.584 1.494L10.584 1.494L10.584 1.495ZM3.757 3.757C3.172 4.343 2.726 5.021 2.421 5.791C2.14 6.501 2 7.237 2 8C2 8.763 2.14 9.499 2.421 10.209C2.726 10.979 3.172 11.657 3.757 12.243C4.343 12.828 5.021 13.274 5.791 13.579C6.501 13.86 7.237 14 8 14L8 2C7.237 2 6.501 2.14 5.791 2.421C5.021 2.726 4.343 3.172 3.757 3.757Z'/%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='M10.584 1.495L10.585 1.495C11.483 1.852 12.274 2.373 12.957 3.057L12.957 3.058C13.637 3.74 14.154 4.528 14.509 5.423C14.836 6.251 15 7.11 15 8C15 8.89 14.836 9.749 14.509 10.577C14.154 11.471 13.638 12.259 12.96 12.94L12.95 12.95L12.941 12.959C12.938 12.961 12.936 12.964 12.933 12.966C12.257 13.64 11.471 14.154 10.577 14.509C9.749 14.836 8.89 15 8 15C7.11 15 6.251 14.836 5.423 14.509C4.525 14.153 3.734 13.633 3.05 12.95C2.367 12.266 1.847 11.475 1.491 10.577C1.164 9.749 1 8.89 1 8C1 7.11 1.164 6.251 1.491 5.423C1.847 4.525 2.367 3.734 3.05 3.05C3.734 2.367 4.525 1.847 5.423 1.491C6.251 1.164 7.11 1 8 1C8.893 1 9.754 1.165 10.584 1.494L10.584 1.494L10.584 1.495ZM3.757 3.757C3.172 4.343 2.726 5.021 2.421 5.791C2.14 6.501 2 7.237 2 8C2 8.763 2.14 9.499 2.421 10.209C2.726 10.979 3.172 11.657 3.757 12.243C4.343 12.828 5.021 13.274 5.791 13.579C6.501 13.86 7.237 14 8 14L8 2C7.237 2 6.501 2.14 5.791 2.421C5.021 2.726 4.343 3.172 3.757 3.757Z'/%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='M10.584 1.495L10.585 1.495C11.483 1.852 12.274 2.373 12.957 3.057L12.957 3.058C13.637 3.74 14.154 4.528 14.509 5.423C14.836 6.251 15 7.11 15 8C15 8.89 14.836 9.749 14.509 10.577C14.154 11.471 13.638 12.259 12.96 12.94L12.95 12.95L12.941 12.959C12.938 12.961 12.936 12.964 12.933 12.966C12.257 13.64 11.471 14.154 10.577 14.509C9.749 14.836 8.89 15 8 15C7.11 15 6.251 14.836 5.423 14.509C4.525 14.153 3.734 13.633 3.05 12.95C2.367 12.266 1.847 11.475 1.491 10.577C1.164 9.749 1 8.89 1 8C1 7.11 1.164 6.251 1.491 5.423C1.847 4.525 2.367 3.734 3.05 3.05C3.734 2.367 4.525 1.847 5.423 1.491C6.251 1.164 7.11 1 8 1C8.893 1 9.754 1.165 10.584 1.494L10.584 1.494L10.584 1.495ZM3.757 3.757C3.172 4.343 2.726 5.021 2.421 5.791C2.14 6.501 2 7.237 2 8C2 8.763 2.14 9.499 2.421 10.209C2.726 10.979 3.172 11.657 3.757 12.243C4.343 12.828 5.021 13.274 5.791 13.579C6.501 13.86 7.237 14 8 14L8 2C7.237 2 6.501 2.14 5.791 2.421C5.021 2.726 4.343 3.172 3.757 3.757Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "contrast" (line-round), MIT. https://gentleface.com/icons/contrast import SwiftUI struct ContrastIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 10.584, y: 1.495)) p.addLine(to: CGPoint(x: 10.585, y: 1.495)) p.addCurve(to: CGPoint(x: 12.957, y: 3.057), control1: CGPoint(x: 11.483, y: 1.852), control2: CGPoint(x: 12.274, y: 2.373)) p.addLine(to: CGPoint(x: 12.957, y: 3.058)) p.addCurve(to: CGPoint(x: 14.509, y: 5.423), control1: CGPoint(x: 13.637, y: 3.74), control2: CGPoint(x: 14.154, y: 4.528)) p.addCurve(to: CGPoint(x: 15, y: 8), control1: CGPoint(x: 14.836, y: 6.251), control2: CGPoint(x: 15, y: 7.11)) p.addCurve(to: CGPoint(x: 14.509, y: 10.577), control1: CGPoint(x: 15, y: 8.89), control2: CGPoint(x: 14.836, y: 9.749)) p.addCurve(to: CGPoint(x: 12.96, y: 12.94), control1: CGPoint(x: 14.154, y: 11.471), control2: CGPoint(x: 13.638, y: 12.259)) p.addLine(to: CGPoint(x: 12.95, y: 12.95)) p.addLine(to: CGPoint(x: 12.941, y: 12.959)) p.addCurve(to: CGPoint(x: 12.933, y: 12.966), control1: CGPoint(x: 12.938, y: 12.961), control2: CGPoint(x: 12.936, y: 12.964)) p.addCurve(to: CGPoint(x: 10.577, y: 14.509), control1: CGPoint(x: 12.257, y: 13.64), control2: CGPoint(x: 11.471, y: 14.154)) p.addCurve(to: CGPoint(x: 8, y: 15), control1: CGPoint(x: 9.749, y: 14.836), control2: CGPoint(x: 8.89, y: 15)) p.addCurve(to: CGPoint(x: 5.423, y: 14.509), control1: CGPoint(x: 7.11, y: 15), control2: CGPoint(x: 6.251, y: 14.836)) p.addCurve(to: CGPoint(x: 3.05, y: 12.95), control1: CGPoint(x: 4.525, y: 14.153), control2: CGPoint(x: 3.734, y: 13.633)) p.addCurve(to: CGPoint(x: 1.491, y: 10.577), control1: CGPoint(x: 2.367, y: 12.266), control2: CGPoint(x: 1.847, y: 11.475)) p.addCurve(to: CGPoint(x: 1, y: 8), control1: CGPoint(x: 1.164, y: 9.749), control2: CGPoint(x: 1, y: 8.89)) p.addCurve(to: CGPoint(x: 1.491, y: 5.423), control1: CGPoint(x: 1, y: 7.11), control2: CGPoint(x: 1.164, y: 6.251)) p.addCurve(to: CGPoint(x: 3.05, y: 3.05), control1: CGPoint(x: 1.847, y: 4.525), control2: CGPoint(x: 2.367, y: 3.734)) p.addCurve(to: CGPoint(x: 5.423, y: 1.491), control1: CGPoint(x: 3.734, y: 2.367), control2: CGPoint(x: 4.525, y: 1.847)) p.addCurve(to: CGPoint(x: 8, y: 1), control1: CGPoint(x: 6.251, y: 1.164), control2: CGPoint(x: 7.11, y: 1)) p.addCurve(to: CGPoint(x: 10.584, y: 1.494), control1: CGPoint(x: 8.893, y: 1), control2: CGPoint(x: 9.754, y: 1.165)) p.addLine(to: CGPoint(x: 10.584, y: 1.494)) p.addLine(to: CGPoint(x: 10.584, y: 1.495)) p.closeSubpath() p.move(to: CGPoint(x: 3.757, y: 3.757)) p.addCurve(to: CGPoint(x: 2.421, y: 5.791), control1: CGPoint(x: 3.172, y: 4.343), control2: CGPoint(x: 2.726, y: 5.021)) p.addCurve(to: CGPoint(x: 2, y: 8), control1: CGPoint(x: 2.14, y: 6.501), control2: CGPoint(x: 2, y: 7.237)) p.addCurve(to: CGPoint(x: 2.421, y: 10.209), control1: CGPoint(x: 2, y: 8.763), control2: CGPoint(x: 2.14, y: 9.499)) p.addCurve(to: CGPoint(x: 3.757, y: 12.243), control1: CGPoint(x: 2.726, y: 10.979), control2: CGPoint(x: 3.172, y: 11.657)) p.addCurve(to: CGPoint(x: 5.791, y: 13.579), control1: CGPoint(x: 4.343, y: 12.828), control2: CGPoint(x: 5.021, y: 13.274)) p.addCurve(to: CGPoint(x: 8, y: 14), control1: CGPoint(x: 6.501, y: 13.86), control2: CGPoint(x: 7.237, y: 14)) p.addLine(to: CGPoint(x: 8, y: 2)) p.addCurve(to: CGPoint(x: 5.791, y: 2.421), control1: CGPoint(x: 7.237, y: 2), control2: CGPoint(x: 6.501, y: 2.14)) p.addCurve(to: CGPoint(x: 3.757, y: 3.757), control1: CGPoint(x: 5.021, y: 2.726), control2: CGPoint(x: 4.343, y: 3.172)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ContrastIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "contrast" (line-round), MIT. https://gentleface.com/icons/contrast 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 ContrastIcon: ImageVector by lazy { ImageVector.Builder( name = "contrast", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M10.584 1.495L10.585 1.495C11.483 1.852 12.274 2.373 12.957 3.057L12.957 3.058C13.637 3.74 14.154 4.528 14.509 5.423C14.836 6.251 15 7.11 15 8C15 8.89 14.836 9.749 14.509 10.577C14.154 11.471 13.638 12.259 12.96 12.94L12.95 12.95L12.941 12.959C12.938 12.961 12.936 12.964 12.933 12.966C12.257 13.64 11.471 14.154 10.577 14.509C9.749 14.836 8.89 15 8 15C7.11 15 6.251 14.836 5.423 14.509C4.525 14.153 3.734 13.633 3.05 12.95C2.367 12.266 1.847 11.475 1.491 10.577C1.164 9.749 1 8.89 1 8C1 7.11 1.164 6.251 1.491 5.423C1.847 4.525 2.367 3.734 3.05 3.05C3.734 2.367 4.525 1.847 5.423 1.491C6.251 1.164 7.11 1 8 1C8.893 1 9.754 1.165 10.584 1.494L10.584 1.494L10.584 1.495ZM3.757 3.757C3.172 4.343 2.726 5.021 2.421 5.791C2.14 6.501 2 7.237 2 8C2 8.763 2.14 9.499 2.421 10.209C2.726 10.979 3.172 11.657 3.757 12.243C4.343 12.828 5.021 13.274 5.791 13.579C6.501 13.86 7.237 14 8 14L8 2C7.237 2 6.501 2.14 5.791 2.421C5.021 2.726 4.343 3.172 3.757 3.757Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ContrastIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "contrast" (line-round), MIT. https://gentleface.com/icons/contrast import 'package:flutter/widgets.dart'; class ContrastIcon extends StatelessWidget { const ContrastIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ContrastIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ContrastIconPainter extends CustomPainter { _ContrastIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(10.584, 1.495) ..lineTo(10.585, 1.495) ..cubicTo(11.483, 1.852, 12.274, 2.373, 12.957, 3.057) ..lineTo(12.957, 3.058) ..cubicTo(13.637, 3.74, 14.154, 4.528, 14.509, 5.423) ..cubicTo(14.836, 6.251, 15, 7.11, 15, 8) ..cubicTo(15, 8.89, 14.836, 9.749, 14.509, 10.577) ..cubicTo(14.154, 11.471, 13.638, 12.259, 12.96, 12.94) ..lineTo(12.95, 12.95) ..lineTo(12.941, 12.959) ..cubicTo(12.938, 12.961, 12.936, 12.964, 12.933, 12.966) ..cubicTo(12.257, 13.64, 11.471, 14.154, 10.577, 14.509) ..cubicTo(9.749, 14.836, 8.89, 15, 8, 15) ..cubicTo(7.11, 15, 6.251, 14.836, 5.423, 14.509) ..cubicTo(4.525, 14.153, 3.734, 13.633, 3.05, 12.95) ..cubicTo(2.367, 12.266, 1.847, 11.475, 1.491, 10.577) ..cubicTo(1.164, 9.749, 1, 8.89, 1, 8) ..cubicTo(1, 7.11, 1.164, 6.251, 1.491, 5.423) ..cubicTo(1.847, 4.525, 2.367, 3.734, 3.05, 3.05) ..cubicTo(3.734, 2.367, 4.525, 1.847, 5.423, 1.491) ..cubicTo(6.251, 1.164, 7.11, 1, 8, 1) ..cubicTo(8.893, 1, 9.754, 1.165, 10.584, 1.494) ..lineTo(10.584, 1.494) ..lineTo(10.584, 1.495) ..close() ..moveTo(3.757, 3.757) ..cubicTo(3.172, 4.343, 2.726, 5.021, 2.421, 5.791) ..cubicTo(2.14, 6.501, 2, 7.237, 2, 8) ..cubicTo(2, 8.763, 2.14, 9.499, 2.421, 10.209) ..cubicTo(2.726, 10.979, 3.172, 11.657, 3.757, 12.243) ..cubicTo(4.343, 12.828, 5.021, 13.274, 5.791, 13.579) ..cubicTo(6.501, 13.86, 7.237, 14, 8, 14) ..lineTo(8, 2) ..cubicTo(7.237, 2, 6.501, 2.14, 5.791, 2.421) ..cubicTo(5.021, 2.726, 4.343, 3.172, 3.757, 3.757) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ContrastIconPainter old) => old.color != color; } ```