Gentleface › Games & sports › whistle

whistle icon

Whistle: whistle, referee, whistleblower, whistleblowing. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path 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"/></svg>

React

// Gentleface "whistle" (line-round), MIT. https://gentleface.com/icons/whistle
import type { SVGProps } from 'react';

export function WhistleIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path 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" />
    </svg>
  );
}

Vue

Vue: see /icons/whistle.md

Svelte

Svelte: see /icons/whistle.md

HTML img

HTML img: see /icons/whistle.md

CSS

CSS: see /icons/whistle.md

Data URL

Data URL: see /icons/whistle.md

Sprite

Sprite: see /icons/whistle.md

SwiftUI

SwiftUI: see /icons/whistle.md

Compose

Compose: see /icons/whistle.md

Android XML

Android XML: see /icons/whistle.md

Flutter

Flutter: see /icons/whistle.md

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. 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. More in how to use.

With npm: import { WhistleIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

whistle, referee, whistleblower, whistleblowing

Alternatives

flag: reporting content (flag owns report)

Tags

whistle, referee, ref, umpire, coach, foul, penalty, kickoff, signal, alert, whistleblower, sport

Category

Games & sports

Component name

WhistleIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More games & sports icons

alien american-football baseball basketball billiards bomb bow-arrow bowling boxing-glove chess-bishop chess-king chess-knight chess-pawn chess-queen chess-rook club · all games & sports icons

For agents

Metadata: /icons/whistle.json · Markdown: /icons/whistle.md · SVG: https://gentleface.com/svg/{style}/16/whistle.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/whistle.png

whistle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More games & sports icons

For agents

whistle icon