# whistle icon Whistle. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/whistle - Category: Games & sports - Use it for: whistle, referee, whistleblower, whistleblowing - Tags: whistle, referee, ref, umpire, coach, foul, penalty, kickoff, signal, alert, whistleblower, sport - Component name: WhistleIcon - Added: 2026-10-29 - Since: version 0.2.0 - npm: `import { WhistleIcon } from '@gentleface/react';` (@gentleface/react 0.2.0) - Changed: 2026-10-30 (added) ## Alternatives - `flag`: reporting content (flag owns report) ## 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/whistle.svg · PNG https://gentleface.com/png/line-round/16/whistle.png · https://gentleface.com/png/line-round/32/whistle.png · https://gentleface.com/png/line-round/48/whistle.png - line-soft: https://gentleface.com/svg/line-soft/16/whistle.svg · PNG https://gentleface.com/png/line-soft/16/whistle.png · https://gentleface.com/png/line-soft/32/whistle.png · https://gentleface.com/png/line-soft/48/whistle.png - line-sharp: https://gentleface.com/svg/line-sharp/16/whistle.svg · PNG https://gentleface.com/png/line-sharp/16/whistle.png · https://gentleface.com/png/line-sharp/32/whistle.png · https://gentleface.com/png/line-sharp/48/whistle.png - solid-round: https://gentleface.com/svg/solid-round/16/whistle.svg · PNG https://gentleface.com/png/solid-round/16/whistle.png · https://gentleface.com/png/solid-round/32/whistle.png · https://gentleface.com/png/solid-round/48/whistle.png - solid-soft: https://gentleface.com/svg/solid-soft/16/whistle.svg · PNG https://gentleface.com/png/solid-soft/16/whistle.png · https://gentleface.com/png/solid-soft/32/whistle.png · https://gentleface.com/png/solid-soft/48/whistle.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/whistle.svg · PNG https://gentleface.com/png/solid-sharp/16/whistle.png · https://gentleface.com/png/solid-sharp/32/whistle.png · https://gentleface.com/png/solid-sharp/48/whistle.png The SVG of every style: https://gentleface.com/icons/whistle.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 "whistle" (line-round), MIT. https://gentleface.com/icons/whistle import type { SVGProps } from 'react'; export function WhistleIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "whistle" (line-round), MIT. https://gentleface.com/icons/whistle. Takes the text color. */ .icon-whistle { 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='M14.86 6.736C14.758 6.993 14.609 7.219 14.414 7.414C14.219 7.609 13.993 7.758 13.736 7.86C13.5 7.953 13.254 8 13 8L11.001 8L11.001 8.001C11.001 8.456 10.939 8.906 10.814 9.352C10.622 10.034 10.3 10.647 9.848 11.193C9.395 11.738 8.852 12.168 8.217 12.482C7.634 12.77 7.019 12.938 6.371 12.986C5.723 13.034 5.089 12.959 4.471 12.76C3.796 12.544 3.195 12.199 2.667 11.727C2.139 11.254 1.729 10.695 1.439 10.049C1.173 9.456 1.028 8.835 1.003 8.186C0.979 7.536 1.078 6.906 1.3 6.295C1.541 5.629 1.908 5.041 2.399 4.531C2.891 4.02 3.465 3.632 4.122 3.366C4.724 3.122 5.35 3 6 3L13 3C13.254 3 13.5 3.047 13.736 3.14C13.993 3.242 14.219 3.391 14.414 3.586C14.609 3.781 14.758 4.007 14.86 4.264C14.953 4.5 15 4.746 15 5L15 6C15 6.254 14.953 6.5 14.86 6.736ZM13.707 6.707C13.902 6.512 14 6.276 14 6L14 5C14 4.724 13.902 4.488 13.707 4.293C13.512 4.098 13.276 4 13 4L6 4C5.48 4 4.979 4.098 4.498 4.293C3.972 4.506 3.513 4.816 3.12 5.225C2.726 5.633 2.433 6.103 2.24 6.636C2.062 7.125 1.983 7.629 2.003 8.148C2.022 8.668 2.138 9.165 2.351 9.639C2.583 10.156 2.911 10.604 3.333 10.981C3.756 11.359 4.237 11.635 4.777 11.808C5.272 11.967 5.778 12.028 6.297 11.989C6.815 11.95 7.307 11.816 7.773 11.585C8.281 11.334 8.716 10.99 9.078 10.554C9.44 10.118 9.698 9.627 9.851 9.081C9.992 8.581 10.033 8.072 9.975 7.556C9.973 7.537 9.972 7.519 9.972 7.5C9.972 7.359 10.02 7.241 10.116 7.144C10.213 7.048 10.331 7 10.472 7L13 7C13.276 7 13.512 6.902 13.707 6.707ZM6.707 7.293C6.902 7.488 7 7.724 7 8C7 8.276 6.902 8.512 6.707 8.707C6.512 8.902 6.276 9 6 9C5.724 9 5.488 8.902 5.293 8.707C5.098 8.512 5 8.276 5 8C5 7.724 5.098 7.488 5.293 7.293C5.488 7.098 5.724 7 6 7C6.276 7 6.512 7.098 6.707 7.293Z'/%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='M14.86 6.736C14.758 6.993 14.609 7.219 14.414 7.414C14.219 7.609 13.993 7.758 13.736 7.86C13.5 7.953 13.254 8 13 8L11.001 8L11.001 8.001C11.001 8.456 10.939 8.906 10.814 9.352C10.622 10.034 10.3 10.647 9.848 11.193C9.395 11.738 8.852 12.168 8.217 12.482C7.634 12.77 7.019 12.938 6.371 12.986C5.723 13.034 5.089 12.959 4.471 12.76C3.796 12.544 3.195 12.199 2.667 11.727C2.139 11.254 1.729 10.695 1.439 10.049C1.173 9.456 1.028 8.835 1.003 8.186C0.979 7.536 1.078 6.906 1.3 6.295C1.541 5.629 1.908 5.041 2.399 4.531C2.891 4.02 3.465 3.632 4.122 3.366C4.724 3.122 5.35 3 6 3L13 3C13.254 3 13.5 3.047 13.736 3.14C13.993 3.242 14.219 3.391 14.414 3.586C14.609 3.781 14.758 4.007 14.86 4.264C14.953 4.5 15 4.746 15 5L15 6C15 6.254 14.953 6.5 14.86 6.736ZM13.707 6.707C13.902 6.512 14 6.276 14 6L14 5C14 4.724 13.902 4.488 13.707 4.293C13.512 4.098 13.276 4 13 4L6 4C5.48 4 4.979 4.098 4.498 4.293C3.972 4.506 3.513 4.816 3.12 5.225C2.726 5.633 2.433 6.103 2.24 6.636C2.062 7.125 1.983 7.629 2.003 8.148C2.022 8.668 2.138 9.165 2.351 9.639C2.583 10.156 2.911 10.604 3.333 10.981C3.756 11.359 4.237 11.635 4.777 11.808C5.272 11.967 5.778 12.028 6.297 11.989C6.815 11.95 7.307 11.816 7.773 11.585C8.281 11.334 8.716 10.99 9.078 10.554C9.44 10.118 9.698 9.627 9.851 9.081C9.992 8.581 10.033 8.072 9.975 7.556C9.973 7.537 9.972 7.519 9.972 7.5C9.972 7.359 10.02 7.241 10.116 7.144C10.213 7.048 10.331 7 10.472 7L13 7C13.276 7 13.512 6.902 13.707 6.707ZM6.707 7.293C6.902 7.488 7 7.724 7 8C7 8.276 6.902 8.512 6.707 8.707C6.512 8.902 6.276 9 6 9C5.724 9 5.488 8.902 5.293 8.707C5.098 8.512 5 8.276 5 8C5 7.724 5.098 7.488 5.293 7.293C5.488 7.098 5.724 7 6 7C6.276 7 6.512 7.098 6.707 7.293Z'/%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='M14.86 6.736C14.758 6.993 14.609 7.219 14.414 7.414C14.219 7.609 13.993 7.758 13.736 7.86C13.5 7.953 13.254 8 13 8L11.001 8L11.001 8.001C11.001 8.456 10.939 8.906 10.814 9.352C10.622 10.034 10.3 10.647 9.848 11.193C9.395 11.738 8.852 12.168 8.217 12.482C7.634 12.77 7.019 12.938 6.371 12.986C5.723 13.034 5.089 12.959 4.471 12.76C3.796 12.544 3.195 12.199 2.667 11.727C2.139 11.254 1.729 10.695 1.439 10.049C1.173 9.456 1.028 8.835 1.003 8.186C0.979 7.536 1.078 6.906 1.3 6.295C1.541 5.629 1.908 5.041 2.399 4.531C2.891 4.02 3.465 3.632 4.122 3.366C4.724 3.122 5.35 3 6 3L13 3C13.254 3 13.5 3.047 13.736 3.14C13.993 3.242 14.219 3.391 14.414 3.586C14.609 3.781 14.758 4.007 14.86 4.264C14.953 4.5 15 4.746 15 5L15 6C15 6.254 14.953 6.5 14.86 6.736ZM13.707 6.707C13.902 6.512 14 6.276 14 6L14 5C14 4.724 13.902 4.488 13.707 4.293C13.512 4.098 13.276 4 13 4L6 4C5.48 4 4.979 4.098 4.498 4.293C3.972 4.506 3.513 4.816 3.12 5.225C2.726 5.633 2.433 6.103 2.24 6.636C2.062 7.125 1.983 7.629 2.003 8.148C2.022 8.668 2.138 9.165 2.351 9.639C2.583 10.156 2.911 10.604 3.333 10.981C3.756 11.359 4.237 11.635 4.777 11.808C5.272 11.967 5.778 12.028 6.297 11.989C6.815 11.95 7.307 11.816 7.773 11.585C8.281 11.334 8.716 10.99 9.078 10.554C9.44 10.118 9.698 9.627 9.851 9.081C9.992 8.581 10.033 8.072 9.975 7.556C9.973 7.537 9.972 7.519 9.972 7.5C9.972 7.359 10.02 7.241 10.116 7.144C10.213 7.048 10.331 7 10.472 7L13 7C13.276 7 13.512 6.902 13.707 6.707ZM6.707 7.293C6.902 7.488 7 7.724 7 8C7 8.276 6.902 8.512 6.707 8.707C6.512 8.902 6.276 9 6 9C5.724 9 5.488 8.902 5.293 8.707C5.098 8.512 5 8.276 5 8C5 7.724 5.098 7.488 5.293 7.293C5.488 7.098 5.724 7 6 7C6.276 7 6.512 7.098 6.707 7.293Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "whistle" (line-round), MIT. https://gentleface.com/icons/whistle import SwiftUI struct WhistleIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 14.86, y: 6.736)) p.addCurve(to: CGPoint(x: 14.414, y: 7.414), control1: CGPoint(x: 14.758, y: 6.993), control2: CGPoint(x: 14.609, y: 7.219)) p.addCurve(to: CGPoint(x: 13.736, y: 7.86), control1: CGPoint(x: 14.219, y: 7.609), control2: CGPoint(x: 13.993, y: 7.758)) p.addCurve(to: CGPoint(x: 13, y: 8), control1: CGPoint(x: 13.5, y: 7.953), control2: CGPoint(x: 13.254, y: 8)) p.addLine(to: CGPoint(x: 11.001, y: 8)) p.addLine(to: CGPoint(x: 11.001, y: 8.001)) p.addCurve(to: CGPoint(x: 10.814, y: 9.352), control1: CGPoint(x: 11.001, y: 8.456), control2: CGPoint(x: 10.939, y: 8.906)) p.addCurve(to: CGPoint(x: 9.848, y: 11.193), control1: CGPoint(x: 10.622, y: 10.034), control2: CGPoint(x: 10.3, y: 10.647)) p.addCurve(to: CGPoint(x: 8.217, y: 12.482), control1: CGPoint(x: 9.395, y: 11.738), control2: CGPoint(x: 8.852, y: 12.168)) p.addCurve(to: CGPoint(x: 6.371, y: 12.986), control1: CGPoint(x: 7.634, y: 12.77), control2: CGPoint(x: 7.019, y: 12.938)) p.addCurve(to: CGPoint(x: 4.471, y: 12.76), control1: CGPoint(x: 5.723, y: 13.034), control2: CGPoint(x: 5.089, y: 12.959)) p.addCurve(to: CGPoint(x: 2.667, y: 11.727), control1: CGPoint(x: 3.796, y: 12.544), control2: CGPoint(x: 3.195, y: 12.199)) p.addCurve(to: CGPoint(x: 1.439, y: 10.049), control1: CGPoint(x: 2.139, y: 11.254), control2: CGPoint(x: 1.729, y: 10.695)) p.addCurve(to: CGPoint(x: 1.003, y: 8.186), control1: CGPoint(x: 1.173, y: 9.456), control2: CGPoint(x: 1.028, y: 8.835)) p.addCurve(to: CGPoint(x: 1.3, y: 6.295), control1: CGPoint(x: 0.979, y: 7.536), control2: CGPoint(x: 1.078, y: 6.906)) p.addCurve(to: CGPoint(x: 2.399, y: 4.531), control1: CGPoint(x: 1.541, y: 5.629), control2: CGPoint(x: 1.908, y: 5.041)) p.addCurve(to: CGPoint(x: 4.122, y: 3.366), control1: CGPoint(x: 2.891, y: 4.02), control2: CGPoint(x: 3.465, y: 3.632)) p.addCurve(to: CGPoint(x: 6, y: 3), control1: CGPoint(x: 4.724, y: 3.122), control2: CGPoint(x: 5.35, y: 3)) p.addLine(to: CGPoint(x: 13, y: 3)) p.addCurve(to: CGPoint(x: 13.736, y: 3.14), control1: CGPoint(x: 13.254, y: 3), control2: CGPoint(x: 13.5, y: 3.047)) p.addCurve(to: CGPoint(x: 14.414, y: 3.586), control1: CGPoint(x: 13.993, y: 3.242), control2: CGPoint(x: 14.219, y: 3.391)) p.addCurve(to: CGPoint(x: 14.86, y: 4.264), control1: CGPoint(x: 14.609, y: 3.781), control2: CGPoint(x: 14.758, y: 4.007)) p.addCurve(to: CGPoint(x: 15, y: 5), control1: CGPoint(x: 14.953, y: 4.5), control2: CGPoint(x: 15, y: 4.746)) p.addLine(to: CGPoint(x: 15, y: 6)) p.addCurve(to: CGPoint(x: 14.86, y: 6.736), control1: CGPoint(x: 15, y: 6.254), control2: CGPoint(x: 14.953, y: 6.5)) p.closeSubpath() p.move(to: CGPoint(x: 13.707, y: 6.707)) p.addCurve(to: CGPoint(x: 14, y: 6), control1: CGPoint(x: 13.902, y: 6.512), control2: CGPoint(x: 14, y: 6.276)) p.addLine(to: CGPoint(x: 14, y: 5)) p.addCurve(to: CGPoint(x: 13.707, y: 4.293), control1: CGPoint(x: 14, y: 4.724), control2: CGPoint(x: 13.902, y: 4.488)) p.addCurve(to: CGPoint(x: 13, y: 4), control1: CGPoint(x: 13.512, y: 4.098), control2: CGPoint(x: 13.276, y: 4)) p.addLine(to: CGPoint(x: 6, y: 4)) p.addCurve(to: CGPoint(x: 4.498, y: 4.293), control1: CGPoint(x: 5.48, y: 4), control2: CGPoint(x: 4.979, y: 4.098)) p.addCurve(to: CGPoint(x: 3.12, y: 5.225), control1: CGPoint(x: 3.972, y: 4.506), control2: CGPoint(x: 3.513, y: 4.816)) p.addCurve(to: CGPoint(x: 2.24, y: 6.636), control1: CGPoint(x: 2.726, y: 5.633), control2: CGPoint(x: 2.433, y: 6.103)) p.addCurve(to: CGPoint(x: 2.003, y: 8.148), control1: CGPoint(x: 2.062, y: 7.125), control2: CGPoint(x: 1.983, y: 7.629)) p.addCurve(to: CGPoint(x: 2.351, y: 9.639), control1: CGPoint(x: 2.022, y: 8.668), control2: CGPoint(x: 2.138, y: 9.165)) p.addCurve(to: CGPoint(x: 3.333, y: 10.981), control1: CGPoint(x: 2.583, y: 10.156), control2: CGPoint(x: 2.911, y: 10.604)) p.addCurve(to: CGPoint(x: 4.777, y: 11.808), control1: CGPoint(x: 3.756, y: 11.359), control2: CGPoint(x: 4.237, y: 11.635)) p.addCurve(to: CGPoint(x: 6.297, y: 11.989), control1: CGPoint(x: 5.272, y: 11.967), control2: CGPoint(x: 5.778, y: 12.028)) p.addCurve(to: CGPoint(x: 7.773, y: 11.585), control1: CGPoint(x: 6.815, y: 11.95), control2: CGPoint(x: 7.307, y: 11.816)) p.addCurve(to: CGPoint(x: 9.078, y: 10.554), control1: CGPoint(x: 8.281, y: 11.334), control2: CGPoint(x: 8.716, y: 10.99)) p.addCurve(to: CGPoint(x: 9.851, y: 9.081), control1: CGPoint(x: 9.44, y: 10.118), control2: CGPoint(x: 9.698, y: 9.627)) p.addCurve(to: CGPoint(x: 9.975, y: 7.556), control1: CGPoint(x: 9.992, y: 8.581), control2: CGPoint(x: 10.033, y: 8.072)) p.addCurve(to: CGPoint(x: 9.972, y: 7.5), control1: CGPoint(x: 9.973, y: 7.537), control2: CGPoint(x: 9.972, y: 7.519)) p.addCurve(to: CGPoint(x: 10.116, y: 7.144), control1: CGPoint(x: 9.972, y: 7.359), control2: CGPoint(x: 10.02, y: 7.241)) p.addCurve(to: CGPoint(x: 10.472, y: 7), control1: CGPoint(x: 10.213, y: 7.048), control2: CGPoint(x: 10.331, y: 7)) p.addLine(to: CGPoint(x: 13, y: 7)) p.addCurve(to: CGPoint(x: 13.707, y: 6.707), control1: CGPoint(x: 13.276, y: 7), control2: CGPoint(x: 13.512, y: 6.902)) p.closeSubpath() p.move(to: CGPoint(x: 6.707, y: 7.293)) p.addCurve(to: CGPoint(x: 7, y: 8), control1: CGPoint(x: 6.902, y: 7.488), control2: CGPoint(x: 7, y: 7.724)) p.addCurve(to: CGPoint(x: 6.707, y: 8.707), control1: CGPoint(x: 7, y: 8.276), control2: CGPoint(x: 6.902, y: 8.512)) p.addCurve(to: CGPoint(x: 6, y: 9), control1: CGPoint(x: 6.512, y: 8.902), control2: CGPoint(x: 6.276, y: 9)) p.addCurve(to: CGPoint(x: 5.293, y: 8.707), control1: CGPoint(x: 5.724, y: 9), control2: CGPoint(x: 5.488, y: 8.902)) p.addCurve(to: CGPoint(x: 5, y: 8), control1: CGPoint(x: 5.098, y: 8.512), control2: CGPoint(x: 5, y: 8.276)) p.addCurve(to: CGPoint(x: 5.293, y: 7.293), control1: CGPoint(x: 5, y: 7.724), control2: CGPoint(x: 5.098, y: 7.488)) p.addCurve(to: CGPoint(x: 6, y: 7), control1: CGPoint(x: 5.488, y: 7.098), control2: CGPoint(x: 5.724, y: 7)) p.addCurve(to: CGPoint(x: 6.707, y: 7.293), control1: CGPoint(x: 6.276, y: 7), control2: CGPoint(x: 6.512, y: 7.098)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // WhistleIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "whistle" (line-round), MIT. https://gentleface.com/icons/whistle 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 WhistleIcon: ImageVector by lazy { ImageVector.Builder( name = "whistle", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M14.86 6.736C14.758 6.993 14.609 7.219 14.414 7.414C14.219 7.609 13.993 7.758 13.736 7.86C13.5 7.953 13.254 8 13 8L11.001 8L11.001 8.001C11.001 8.456 10.939 8.906 10.814 9.352C10.622 10.034 10.3 10.647 9.848 11.193C9.395 11.738 8.852 12.168 8.217 12.482C7.634 12.77 7.019 12.938 6.371 12.986C5.723 13.034 5.089 12.959 4.471 12.76C3.796 12.544 3.195 12.199 2.667 11.727C2.139 11.254 1.729 10.695 1.439 10.049C1.173 9.456 1.028 8.835 1.003 8.186C0.979 7.536 1.078 6.906 1.3 6.295C1.541 5.629 1.908 5.041 2.399 4.531C2.891 4.02 3.465 3.632 4.122 3.366C4.724 3.122 5.35 3 6 3L13 3C13.254 3 13.5 3.047 13.736 3.14C13.993 3.242 14.219 3.391 14.414 3.586C14.609 3.781 14.758 4.007 14.86 4.264C14.953 4.5 15 4.746 15 5L15 6C15 6.254 14.953 6.5 14.86 6.736ZM13.707 6.707C13.902 6.512 14 6.276 14 6L14 5C14 4.724 13.902 4.488 13.707 4.293C13.512 4.098 13.276 4 13 4L6 4C5.48 4 4.979 4.098 4.498 4.293C3.972 4.506 3.513 4.816 3.12 5.225C2.726 5.633 2.433 6.103 2.24 6.636C2.062 7.125 1.983 7.629 2.003 8.148C2.022 8.668 2.138 9.165 2.351 9.639C2.583 10.156 2.911 10.604 3.333 10.981C3.756 11.359 4.237 11.635 4.777 11.808C5.272 11.967 5.778 12.028 6.297 11.989C6.815 11.95 7.307 11.816 7.773 11.585C8.281 11.334 8.716 10.99 9.078 10.554C9.44 10.118 9.698 9.627 9.851 9.081C9.992 8.581 10.033 8.072 9.975 7.556C9.973 7.537 9.972 7.519 9.972 7.5C9.972 7.359 10.02 7.241 10.116 7.144C10.213 7.048 10.331 7 10.472 7L13 7C13.276 7 13.512 6.902 13.707 6.707ZM6.707 7.293C6.902 7.488 7 7.724 7 8C7 8.276 6.902 8.512 6.707 8.707C6.512 8.902 6.276 9 6 9C5.724 9 5.488 8.902 5.293 8.707C5.098 8.512 5 8.276 5 8C5 7.724 5.098 7.488 5.293 7.293C5.488 7.098 5.724 7 6 7C6.276 7 6.512 7.098 6.707 7.293Z"), fill = SolidColor(Color.Black), ).build() } // Icon(WhistleIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "whistle" (line-round), MIT. https://gentleface.com/icons/whistle import 'package:flutter/widgets.dart'; class WhistleIcon extends StatelessWidget { const WhistleIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _WhistleIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _WhistleIconPainter extends CustomPainter { _WhistleIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(14.86, 6.736) ..cubicTo(14.758, 6.993, 14.609, 7.219, 14.414, 7.414) ..cubicTo(14.219, 7.609, 13.993, 7.758, 13.736, 7.86) ..cubicTo(13.5, 7.953, 13.254, 8, 13, 8) ..lineTo(11.001, 8) ..lineTo(11.001, 8.001) ..cubicTo(11.001, 8.456, 10.939, 8.906, 10.814, 9.352) ..cubicTo(10.622, 10.034, 10.3, 10.647, 9.848, 11.193) ..cubicTo(9.395, 11.738, 8.852, 12.168, 8.217, 12.482) ..cubicTo(7.634, 12.77, 7.019, 12.938, 6.371, 12.986) ..cubicTo(5.723, 13.034, 5.089, 12.959, 4.471, 12.76) ..cubicTo(3.796, 12.544, 3.195, 12.199, 2.667, 11.727) ..cubicTo(2.139, 11.254, 1.729, 10.695, 1.439, 10.049) ..cubicTo(1.173, 9.456, 1.028, 8.835, 1.003, 8.186) ..cubicTo(0.979, 7.536, 1.078, 6.906, 1.3, 6.295) ..cubicTo(1.541, 5.629, 1.908, 5.041, 2.399, 4.531) ..cubicTo(2.891, 4.02, 3.465, 3.632, 4.122, 3.366) ..cubicTo(4.724, 3.122, 5.35, 3, 6, 3) ..lineTo(13, 3) ..cubicTo(13.254, 3, 13.5, 3.047, 13.736, 3.14) ..cubicTo(13.993, 3.242, 14.219, 3.391, 14.414, 3.586) ..cubicTo(14.609, 3.781, 14.758, 4.007, 14.86, 4.264) ..cubicTo(14.953, 4.5, 15, 4.746, 15, 5) ..lineTo(15, 6) ..cubicTo(15, 6.254, 14.953, 6.5, 14.86, 6.736) ..close() ..moveTo(13.707, 6.707) ..cubicTo(13.902, 6.512, 14, 6.276, 14, 6) ..lineTo(14, 5) ..cubicTo(14, 4.724, 13.902, 4.488, 13.707, 4.293) ..cubicTo(13.512, 4.098, 13.276, 4, 13, 4) ..lineTo(6, 4) ..cubicTo(5.48, 4, 4.979, 4.098, 4.498, 4.293) ..cubicTo(3.972, 4.506, 3.513, 4.816, 3.12, 5.225) ..cubicTo(2.726, 5.633, 2.433, 6.103, 2.24, 6.636) ..cubicTo(2.062, 7.125, 1.983, 7.629, 2.003, 8.148) ..cubicTo(2.022, 8.668, 2.138, 9.165, 2.351, 9.639) ..cubicTo(2.583, 10.156, 2.911, 10.604, 3.333, 10.981) ..cubicTo(3.756, 11.359, 4.237, 11.635, 4.777, 11.808) ..cubicTo(5.272, 11.967, 5.778, 12.028, 6.297, 11.989) ..cubicTo(6.815, 11.95, 7.307, 11.816, 7.773, 11.585) ..cubicTo(8.281, 11.334, 8.716, 10.99, 9.078, 10.554) ..cubicTo(9.44, 10.118, 9.698, 9.627, 9.851, 9.081) ..cubicTo(9.992, 8.581, 10.033, 8.072, 9.975, 7.556) ..cubicTo(9.973, 7.537, 9.972, 7.519, 9.972, 7.5) ..cubicTo(9.972, 7.359, 10.02, 7.241, 10.116, 7.144) ..cubicTo(10.213, 7.048, 10.331, 7, 10.472, 7) ..lineTo(13, 7) ..cubicTo(13.276, 7, 13.512, 6.902, 13.707, 6.707) ..close() ..moveTo(6.707, 7.293) ..cubicTo(6.902, 7.488, 7, 7.724, 7, 8) ..cubicTo(7, 8.276, 6.902, 8.512, 6.707, 8.707) ..cubicTo(6.512, 8.902, 6.276, 9, 6, 9) ..cubicTo(5.724, 9, 5.488, 8.902, 5.293, 8.707) ..cubicTo(5.098, 8.512, 5, 8.276, 5, 8) ..cubicTo(5, 7.724, 5.098, 7.488, 5.293, 7.293) ..cubicTo(5.488, 7.098, 5.724, 7, 6, 7) ..cubicTo(6.276, 7, 6.512, 7.098, 6.707, 7.293) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_WhistleIconPainter old) => old.color != color; } ```