# valve icon Valve. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/valve - Category: Home & household - Use it for: valve, water valve, shutoff valve, flow control - Tags: valve, water-valve, shutoff-valve, shut-off, stopcock, gate-valve, handwheel, flow-control, pipe, plumbing, water-supply, smart-home - Component name: ValveIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { ValveIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## 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/valve.svg · PNG https://gentleface.com/png/line-round/16/valve.png · https://gentleface.com/png/line-round/32/valve.png · https://gentleface.com/png/line-round/48/valve.png - line-soft: https://gentleface.com/svg/line-soft/16/valve.svg · PNG https://gentleface.com/png/line-soft/16/valve.png · https://gentleface.com/png/line-soft/32/valve.png · https://gentleface.com/png/line-soft/48/valve.png - line-sharp: https://gentleface.com/svg/line-sharp/16/valve.svg · PNG https://gentleface.com/png/line-sharp/16/valve.png · https://gentleface.com/png/line-sharp/32/valve.png · https://gentleface.com/png/line-sharp/48/valve.png - solid-round: https://gentleface.com/svg/solid-round/16/valve.svg · PNG https://gentleface.com/png/solid-round/16/valve.png · https://gentleface.com/png/solid-round/32/valve.png · https://gentleface.com/png/solid-round/48/valve.png - solid-soft: https://gentleface.com/svg/solid-soft/16/valve.svg · PNG https://gentleface.com/png/solid-soft/16/valve.png · https://gentleface.com/png/solid-soft/32/valve.png · https://gentleface.com/png/solid-soft/48/valve.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/valve.svg · PNG https://gentleface.com/png/solid-sharp/16/valve.png · https://gentleface.com/png/solid-sharp/32/valve.png · https://gentleface.com/png/solid-sharp/48/valve.png The SVG of every style: https://gentleface.com/icons/valve.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 "valve" (line-round), MIT. https://gentleface.com/icons/valve import type { SVGProps } from 'react'; export function ValveIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "valve" (line-round), MIT. https://gentleface.com/icons/valve. Takes the text color. */ .icon-valve { 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='M11.856 1.144C11.952 1.241 12 1.359 12 1.5C12 1.641 11.952 1.759 11.856 1.856C11.759 1.952 11.641 2 11.5 2L8 2L8 5L9 5C9.276 5 9.512 5.098 9.707 5.293C9.902 5.488 10 5.724 10 6L10 8L13 8C13.276 8 13.512 8.098 13.707 8.293C13.902 8.488 14 8.724 14 9L14 12C14 12.276 13.902 12.512 13.707 12.707C13.512 12.902 13.276 13 13 13L10 13C10 13.276 9.902 13.512 9.707 13.707C9.512 13.902 9.276 14 9 14L6 14C5.724 14 5.488 13.902 5.293 13.707C5.098 13.512 5 13.276 5 13L2 13C1.724 13 1.488 12.902 1.293 12.707C1.098 12.512 1 12.276 1 12L1 9C1 8.724 1.098 8.488 1.293 8.293C1.488 8.098 1.724 8 2 8L5 8L5 6C5 5.724 5.098 5.488 5.293 5.293C5.488 5.098 5.724 5 6 5L7 5L7 2L3.5 2C3.359 2 3.241 1.952 3.144 1.856C3.048 1.759 3 1.641 3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1L11.5 1C11.641 1 11.759 1.048 11.856 1.144ZM5.707 8.707C5.512 8.902 5.276 9 5 9L2 9L2 12L5 12C5.276 12 5.512 12.098 5.707 12.293C5.902 12.488 6 12.724 6 13L9 13C9 12.724 9.098 12.488 9.293 12.293C9.488 12.098 9.724 12 10 12L13 12L13 9L10 9C9.724 9 9.488 8.902 9.293 8.707C9.098 8.512 9 8.276 9 8L9 6L6 6L6 8C6 8.276 5.902 8.512 5.707 8.707Z'/%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='M11.856 1.144C11.952 1.241 12 1.359 12 1.5C12 1.641 11.952 1.759 11.856 1.856C11.759 1.952 11.641 2 11.5 2L8 2L8 5L9 5C9.276 5 9.512 5.098 9.707 5.293C9.902 5.488 10 5.724 10 6L10 8L13 8C13.276 8 13.512 8.098 13.707 8.293C13.902 8.488 14 8.724 14 9L14 12C14 12.276 13.902 12.512 13.707 12.707C13.512 12.902 13.276 13 13 13L10 13C10 13.276 9.902 13.512 9.707 13.707C9.512 13.902 9.276 14 9 14L6 14C5.724 14 5.488 13.902 5.293 13.707C5.098 13.512 5 13.276 5 13L2 13C1.724 13 1.488 12.902 1.293 12.707C1.098 12.512 1 12.276 1 12L1 9C1 8.724 1.098 8.488 1.293 8.293C1.488 8.098 1.724 8 2 8L5 8L5 6C5 5.724 5.098 5.488 5.293 5.293C5.488 5.098 5.724 5 6 5L7 5L7 2L3.5 2C3.359 2 3.241 1.952 3.144 1.856C3.048 1.759 3 1.641 3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1L11.5 1C11.641 1 11.759 1.048 11.856 1.144ZM5.707 8.707C5.512 8.902 5.276 9 5 9L2 9L2 12L5 12C5.276 12 5.512 12.098 5.707 12.293C5.902 12.488 6 12.724 6 13L9 13C9 12.724 9.098 12.488 9.293 12.293C9.488 12.098 9.724 12 10 12L13 12L13 9L10 9C9.724 9 9.488 8.902 9.293 8.707C9.098 8.512 9 8.276 9 8L9 6L6 6L6 8C6 8.276 5.902 8.512 5.707 8.707Z'/%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='M11.856 1.144C11.952 1.241 12 1.359 12 1.5C12 1.641 11.952 1.759 11.856 1.856C11.759 1.952 11.641 2 11.5 2L8 2L8 5L9 5C9.276 5 9.512 5.098 9.707 5.293C9.902 5.488 10 5.724 10 6L10 8L13 8C13.276 8 13.512 8.098 13.707 8.293C13.902 8.488 14 8.724 14 9L14 12C14 12.276 13.902 12.512 13.707 12.707C13.512 12.902 13.276 13 13 13L10 13C10 13.276 9.902 13.512 9.707 13.707C9.512 13.902 9.276 14 9 14L6 14C5.724 14 5.488 13.902 5.293 13.707C5.098 13.512 5 13.276 5 13L2 13C1.724 13 1.488 12.902 1.293 12.707C1.098 12.512 1 12.276 1 12L1 9C1 8.724 1.098 8.488 1.293 8.293C1.488 8.098 1.724 8 2 8L5 8L5 6C5 5.724 5.098 5.488 5.293 5.293C5.488 5.098 5.724 5 6 5L7 5L7 2L3.5 2C3.359 2 3.241 1.952 3.144 1.856C3.048 1.759 3 1.641 3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1L11.5 1C11.641 1 11.759 1.048 11.856 1.144ZM5.707 8.707C5.512 8.902 5.276 9 5 9L2 9L2 12L5 12C5.276 12 5.512 12.098 5.707 12.293C5.902 12.488 6 12.724 6 13L9 13C9 12.724 9.098 12.488 9.293 12.293C9.488 12.098 9.724 12 10 12L13 12L13 9L10 9C9.724 9 9.488 8.902 9.293 8.707C9.098 8.512 9 8.276 9 8L9 6L6 6L6 8C6 8.276 5.902 8.512 5.707 8.707Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "valve" (line-round), MIT. https://gentleface.com/icons/valve import SwiftUI struct ValveIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 11.856, y: 1.144)) p.addCurve(to: CGPoint(x: 12, y: 1.5), control1: CGPoint(x: 11.952, y: 1.241), control2: CGPoint(x: 12, y: 1.359)) p.addCurve(to: CGPoint(x: 11.856, y: 1.856), control1: CGPoint(x: 12, y: 1.641), control2: CGPoint(x: 11.952, y: 1.759)) p.addCurve(to: CGPoint(x: 11.5, y: 2), control1: CGPoint(x: 11.759, y: 1.952), control2: CGPoint(x: 11.641, y: 2)) p.addLine(to: CGPoint(x: 8, y: 2)) p.addLine(to: CGPoint(x: 8, y: 5)) p.addLine(to: CGPoint(x: 9, y: 5)) p.addCurve(to: CGPoint(x: 9.707, y: 5.293), control1: CGPoint(x: 9.276, y: 5), control2: CGPoint(x: 9.512, y: 5.098)) p.addCurve(to: CGPoint(x: 10, y: 6), control1: CGPoint(x: 9.902, y: 5.488), control2: CGPoint(x: 10, y: 5.724)) p.addLine(to: CGPoint(x: 10, y: 8)) p.addLine(to: CGPoint(x: 13, y: 8)) p.addCurve(to: CGPoint(x: 13.707, y: 8.293), control1: CGPoint(x: 13.276, y: 8), control2: CGPoint(x: 13.512, y: 8.098)) p.addCurve(to: CGPoint(x: 14, y: 9), control1: CGPoint(x: 13.902, y: 8.488), control2: CGPoint(x: 14, y: 8.724)) p.addLine(to: CGPoint(x: 14, y: 12)) p.addCurve(to: CGPoint(x: 13.707, y: 12.707), control1: CGPoint(x: 14, y: 12.276), control2: CGPoint(x: 13.902, y: 12.512)) p.addCurve(to: CGPoint(x: 13, y: 13), control1: CGPoint(x: 13.512, y: 12.902), control2: CGPoint(x: 13.276, y: 13)) p.addLine(to: CGPoint(x: 10, y: 13)) p.addCurve(to: CGPoint(x: 9.707, y: 13.707), control1: CGPoint(x: 10, y: 13.276), control2: CGPoint(x: 9.902, y: 13.512)) p.addCurve(to: CGPoint(x: 9, y: 14), control1: CGPoint(x: 9.512, y: 13.902), control2: CGPoint(x: 9.276, y: 14)) p.addLine(to: CGPoint(x: 6, y: 14)) p.addCurve(to: CGPoint(x: 5.293, y: 13.707), control1: CGPoint(x: 5.724, y: 14), control2: CGPoint(x: 5.488, y: 13.902)) p.addCurve(to: CGPoint(x: 5, y: 13), control1: CGPoint(x: 5.098, y: 13.512), control2: CGPoint(x: 5, y: 13.276)) p.addLine(to: CGPoint(x: 2, y: 13)) p.addCurve(to: CGPoint(x: 1.293, y: 12.707), control1: CGPoint(x: 1.724, y: 13), control2: CGPoint(x: 1.488, y: 12.902)) p.addCurve(to: CGPoint(x: 1, y: 12), control1: CGPoint(x: 1.098, y: 12.512), control2: CGPoint(x: 1, y: 12.276)) p.addLine(to: CGPoint(x: 1, y: 9)) p.addCurve(to: CGPoint(x: 1.293, y: 8.293), control1: CGPoint(x: 1, y: 8.724), control2: CGPoint(x: 1.098, y: 8.488)) p.addCurve(to: CGPoint(x: 2, y: 8), control1: CGPoint(x: 1.488, y: 8.098), control2: CGPoint(x: 1.724, y: 8)) p.addLine(to: CGPoint(x: 5, y: 8)) p.addLine(to: CGPoint(x: 5, y: 6)) p.addCurve(to: CGPoint(x: 5.293, y: 5.293), control1: CGPoint(x: 5, y: 5.724), control2: CGPoint(x: 5.098, y: 5.488)) p.addCurve(to: CGPoint(x: 6, y: 5), control1: CGPoint(x: 5.488, y: 5.098), control2: CGPoint(x: 5.724, y: 5)) p.addLine(to: CGPoint(x: 7, y: 5)) p.addLine(to: CGPoint(x: 7, y: 2)) p.addLine(to: CGPoint(x: 3.5, y: 2)) p.addCurve(to: CGPoint(x: 3.144, y: 1.856), control1: CGPoint(x: 3.359, y: 2), control2: CGPoint(x: 3.241, y: 1.952)) p.addCurve(to: CGPoint(x: 3, y: 1.5), control1: CGPoint(x: 3.048, y: 1.759), control2: CGPoint(x: 3, y: 1.641)) p.addCurve(to: CGPoint(x: 3.144, y: 1.144), control1: CGPoint(x: 3, y: 1.359), control2: CGPoint(x: 3.048, y: 1.241)) p.addCurve(to: CGPoint(x: 3.5, y: 1), control1: CGPoint(x: 3.241, y: 1.048), control2: CGPoint(x: 3.359, y: 1)) p.addLine(to: CGPoint(x: 11.5, y: 1)) p.addCurve(to: CGPoint(x: 11.856, y: 1.144), control1: CGPoint(x: 11.641, y: 1), control2: CGPoint(x: 11.759, y: 1.048)) p.closeSubpath() p.move(to: CGPoint(x: 5.707, y: 8.707)) p.addCurve(to: CGPoint(x: 5, y: 9), control1: CGPoint(x: 5.512, y: 8.902), control2: CGPoint(x: 5.276, y: 9)) p.addLine(to: CGPoint(x: 2, y: 9)) p.addLine(to: CGPoint(x: 2, y: 12)) p.addLine(to: CGPoint(x: 5, y: 12)) p.addCurve(to: CGPoint(x: 5.707, y: 12.293), control1: CGPoint(x: 5.276, y: 12), control2: CGPoint(x: 5.512, y: 12.098)) p.addCurve(to: CGPoint(x: 6, y: 13), control1: CGPoint(x: 5.902, y: 12.488), control2: CGPoint(x: 6, y: 12.724)) p.addLine(to: CGPoint(x: 9, y: 13)) p.addCurve(to: CGPoint(x: 9.293, y: 12.293), control1: CGPoint(x: 9, y: 12.724), control2: CGPoint(x: 9.098, y: 12.488)) p.addCurve(to: CGPoint(x: 10, y: 12), control1: CGPoint(x: 9.488, y: 12.098), control2: CGPoint(x: 9.724, y: 12)) p.addLine(to: CGPoint(x: 13, y: 12)) p.addLine(to: CGPoint(x: 13, y: 9)) p.addLine(to: CGPoint(x: 10, y: 9)) p.addCurve(to: CGPoint(x: 9.293, y: 8.707), control1: CGPoint(x: 9.724, y: 9), control2: CGPoint(x: 9.488, y: 8.902)) p.addCurve(to: CGPoint(x: 9, y: 8), control1: CGPoint(x: 9.098, y: 8.512), control2: CGPoint(x: 9, y: 8.276)) p.addLine(to: CGPoint(x: 9, y: 6)) p.addLine(to: CGPoint(x: 6, y: 6)) p.addLine(to: CGPoint(x: 6, y: 8)) p.addCurve(to: CGPoint(x: 5.707, y: 8.707), control1: CGPoint(x: 6, y: 8.276), control2: CGPoint(x: 5.902, y: 8.512)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // ValveIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "valve" (line-round), MIT. https://gentleface.com/icons/valve 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 ValveIcon: ImageVector by lazy { ImageVector.Builder( name = "valve", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M11.856 1.144C11.952 1.241 12 1.359 12 1.5C12 1.641 11.952 1.759 11.856 1.856C11.759 1.952 11.641 2 11.5 2L8 2L8 5L9 5C9.276 5 9.512 5.098 9.707 5.293C9.902 5.488 10 5.724 10 6L10 8L13 8C13.276 8 13.512 8.098 13.707 8.293C13.902 8.488 14 8.724 14 9L14 12C14 12.276 13.902 12.512 13.707 12.707C13.512 12.902 13.276 13 13 13L10 13C10 13.276 9.902 13.512 9.707 13.707C9.512 13.902 9.276 14 9 14L6 14C5.724 14 5.488 13.902 5.293 13.707C5.098 13.512 5 13.276 5 13L2 13C1.724 13 1.488 12.902 1.293 12.707C1.098 12.512 1 12.276 1 12L1 9C1 8.724 1.098 8.488 1.293 8.293C1.488 8.098 1.724 8 2 8L5 8L5 6C5 5.724 5.098 5.488 5.293 5.293C5.488 5.098 5.724 5 6 5L7 5L7 2L3.5 2C3.359 2 3.241 1.952 3.144 1.856C3.048 1.759 3 1.641 3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1L11.5 1C11.641 1 11.759 1.048 11.856 1.144ZM5.707 8.707C5.512 8.902 5.276 9 5 9L2 9L2 12L5 12C5.276 12 5.512 12.098 5.707 12.293C5.902 12.488 6 12.724 6 13L9 13C9 12.724 9.098 12.488 9.293 12.293C9.488 12.098 9.724 12 10 12L13 12L13 9L10 9C9.724 9 9.488 8.902 9.293 8.707C9.098 8.512 9 8.276 9 8L9 6L6 6L6 8C6 8.276 5.902 8.512 5.707 8.707Z"), fill = SolidColor(Color.Black), ).build() } // Icon(ValveIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "valve" (line-round), MIT. https://gentleface.com/icons/valve import 'package:flutter/widgets.dart'; class ValveIcon extends StatelessWidget { const ValveIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _ValveIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _ValveIconPainter extends CustomPainter { _ValveIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(11.856, 1.144) ..cubicTo(11.952, 1.241, 12, 1.359, 12, 1.5) ..cubicTo(12, 1.641, 11.952, 1.759, 11.856, 1.856) ..cubicTo(11.759, 1.952, 11.641, 2, 11.5, 2) ..lineTo(8, 2) ..lineTo(8, 5) ..lineTo(9, 5) ..cubicTo(9.276, 5, 9.512, 5.098, 9.707, 5.293) ..cubicTo(9.902, 5.488, 10, 5.724, 10, 6) ..lineTo(10, 8) ..lineTo(13, 8) ..cubicTo(13.276, 8, 13.512, 8.098, 13.707, 8.293) ..cubicTo(13.902, 8.488, 14, 8.724, 14, 9) ..lineTo(14, 12) ..cubicTo(14, 12.276, 13.902, 12.512, 13.707, 12.707) ..cubicTo(13.512, 12.902, 13.276, 13, 13, 13) ..lineTo(10, 13) ..cubicTo(10, 13.276, 9.902, 13.512, 9.707, 13.707) ..cubicTo(9.512, 13.902, 9.276, 14, 9, 14) ..lineTo(6, 14) ..cubicTo(5.724, 14, 5.488, 13.902, 5.293, 13.707) ..cubicTo(5.098, 13.512, 5, 13.276, 5, 13) ..lineTo(2, 13) ..cubicTo(1.724, 13, 1.488, 12.902, 1.293, 12.707) ..cubicTo(1.098, 12.512, 1, 12.276, 1, 12) ..lineTo(1, 9) ..cubicTo(1, 8.724, 1.098, 8.488, 1.293, 8.293) ..cubicTo(1.488, 8.098, 1.724, 8, 2, 8) ..lineTo(5, 8) ..lineTo(5, 6) ..cubicTo(5, 5.724, 5.098, 5.488, 5.293, 5.293) ..cubicTo(5.488, 5.098, 5.724, 5, 6, 5) ..lineTo(7, 5) ..lineTo(7, 2) ..lineTo(3.5, 2) ..cubicTo(3.359, 2, 3.241, 1.952, 3.144, 1.856) ..cubicTo(3.048, 1.759, 3, 1.641, 3, 1.5) ..cubicTo(3, 1.359, 3.048, 1.241, 3.144, 1.144) ..cubicTo(3.241, 1.048, 3.359, 1, 3.5, 1) ..lineTo(11.5, 1) ..cubicTo(11.641, 1, 11.759, 1.048, 11.856, 1.144) ..close() ..moveTo(5.707, 8.707) ..cubicTo(5.512, 8.902, 5.276, 9, 5, 9) ..lineTo(2, 9) ..lineTo(2, 12) ..lineTo(5, 12) ..cubicTo(5.276, 12, 5.512, 12.098, 5.707, 12.293) ..cubicTo(5.902, 12.488, 6, 12.724, 6, 13) ..lineTo(9, 13) ..cubicTo(9, 12.724, 9.098, 12.488, 9.293, 12.293) ..cubicTo(9.488, 12.098, 9.724, 12, 10, 12) ..lineTo(13, 12) ..lineTo(13, 9) ..lineTo(10, 9) ..cubicTo(9.724, 9, 9.488, 8.902, 9.293, 8.707) ..cubicTo(9.098, 8.512, 9, 8.276, 9, 8) ..lineTo(9, 6) ..lineTo(6, 6) ..lineTo(6, 8) ..cubicTo(6, 8.276, 5.902, 8.512, 5.707, 8.707) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_ValveIconPainter old) => old.color != color; } ```