gentleface

Gentleface › Maps & places › flag

flag icon

Flag: report, mark, milestone, report abuse. 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="M13.926 8.763C13.876 8.843 13.809 8.904 13.724 8.947C13.554 9.032 13.324 9.158 13.035 9.325C12.641 9.553 12.339 9.707 12.128 9.789C11.767 9.93 11.391 10 11 10C10.495 10 9.937 9.885 9.324 9.656C8.975 9.525 8.459 9.288 7.776 8.947C7.125 8.622 6.641 8.4 6.324 8.281C5.825 8.094 5.384 8 5 8C4.734 8 4.479 8.047 4.235 8.142C4.072 8.206 3.815 8.339 3.465 8.541C3.291 8.641 3.136 8.729 3 8.802L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 2.5C2 2.404 2.025 2.317 2.074 2.237C2.124 2.157 2.191 2.096 2.276 2.053C2.446 1.968 2.676 1.842 2.965 1.675C3.359 1.447 3.661 1.293 3.872 1.211C4.233 1.07 4.609 1 5 1C5.505 1 6.063 1.115 6.676 1.344C7.025 1.475 7.541 1.712 8.224 2.053C8.875 2.378 9.359 2.6 9.676 2.719C10.175 2.906 10.616 3 11 3C11.266 3 11.521 2.953 11.765 2.858C11.928 2.794 12.185 2.661 12.535 2.459C12.842 2.282 13.089 2.147 13.276 2.053C13.4 1.991 13.527 1.982 13.658 2.026C13.789 2.069 13.885 2.153 13.947 2.276C13.982 2.347 14 2.421 14 2.5L14 8.5C14 8.596 13.975 8.683 13.926 8.763ZM12.128 3.789C11.767 3.93 11.391 4 11 4C10.495 4 9.937 3.885 9.324 3.656C8.975 3.525 8.459 3.288 7.776 2.947C7.125 2.622 6.641 2.4 6.324 2.281C5.825 2.094 5.384 2 5 2C4.734 2 4.479 2.047 4.235 2.142C4.072 2.206 3.815 2.339 3.465 2.541C3.291 2.641 3.136 2.729 3 2.802L3 7.655C3.377 7.438 3.668 7.29 3.872 7.211C4.233 7.07 4.609 7 5 7C5.505 7 6.063 7.115 6.676 7.344C7.025 7.475 7.541 7.712 8.224 8.053C8.875 8.378 9.359 8.6 9.676 8.719C10.175 8.906 10.616 9 11 9C11.266 9 11.521 8.953 11.765 8.858C11.928 8.794 12.185 8.661 12.535 8.459C12.709 8.359 12.864 8.271 13 8.198L13 3.345C12.623 3.562 12.332 3.71 12.128 3.789Z"/></svg>
React
// Gentleface "flag" (line-round), MIT. https://gentleface.com/icons/flag
import type { SVGProps } from 'react';

export function FlagIcon(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="M13.926 8.763C13.876 8.843 13.809 8.904 13.724 8.947C13.554 9.032 13.324 9.158 13.035 9.325C12.641 9.553 12.339 9.707 12.128 9.789C11.767 9.93 11.391 10 11 10C10.495 10 9.937 9.885 9.324 9.656C8.975 9.525 8.459 9.288 7.776 8.947C7.125 8.622 6.641 8.4 6.324 8.281C5.825 8.094 5.384 8 5 8C4.734 8 4.479 8.047 4.235 8.142C4.072 8.206 3.815 8.339 3.465 8.541C3.291 8.641 3.136 8.729 3 8.802L3 14.5C3 14.641 2.952 14.759 2.856 14.856C2.759 14.952 2.641 15 2.5 15C2.359 15 2.241 14.952 2.144 14.856C2.048 14.759 2 14.641 2 14.5L2 2.5C2 2.404 2.025 2.317 2.074 2.237C2.124 2.157 2.191 2.096 2.276 2.053C2.446 1.968 2.676 1.842 2.965 1.675C3.359 1.447 3.661 1.293 3.872 1.211C4.233 1.07 4.609 1 5 1C5.505 1 6.063 1.115 6.676 1.344C7.025 1.475 7.541 1.712 8.224 2.053C8.875 2.378 9.359 2.6 9.676 2.719C10.175 2.906 10.616 3 11 3C11.266 3 11.521 2.953 11.765 2.858C11.928 2.794 12.185 2.661 12.535 2.459C12.842 2.282 13.089 2.147 13.276 2.053C13.4 1.991 13.527 1.982 13.658 2.026C13.789 2.069 13.885 2.153 13.947 2.276C13.982 2.347 14 2.421 14 2.5L14 8.5C14 8.596 13.975 8.683 13.926 8.763ZM12.128 3.789C11.767 3.93 11.391 4 11 4C10.495 4 9.937 3.885 9.324 3.656C8.975 3.525 8.459 3.288 7.776 2.947C7.125 2.622 6.641 2.4 6.324 2.281C5.825 2.094 5.384 2 5 2C4.734 2 4.479 2.047 4.235 2.142C4.072 2.206 3.815 2.339 3.465 2.541C3.291 2.641 3.136 2.729 3 2.802L3 7.655C3.377 7.438 3.668 7.29 3.872 7.211C4.233 7.07 4.609 7 5 7C5.505 7 6.063 7.115 6.676 7.344C7.025 7.475 7.541 7.712 8.224 8.053C8.875 8.378 9.359 8.6 9.676 8.719C10.175 8.906 10.616 9 11 9C11.266 9 11.521 8.953 11.765 8.858C11.928 8.794 12.185 8.661 12.535 8.459C12.709 8.359 12.864 8.271 13 8.198L13 3.345C12.623 3.562 12.332 3.71 12.128 3.789Z" />
    </svg>
  );
}
Vue
Vue: see /icons/flag.md
Svelte
Svelte: see /icons/flag.md
HTML img
HTML img: see /icons/flag.md
CSS
CSS: see /icons/flag.md
Data URL
Data URL: see /icons/flag.md
Sprite
Sprite: see /icons/flag.md
SwiftUI
SwiftUI: see /icons/flag.md
Compose
Compose: see /icons/flag.md
Android XML
Android XML: see /icons/flag.md
Flutter
Flutter: see /icons/flag.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.

Meaning

Use it for
report, mark, milestone, report abuse, report content, flagged, flag message, project milestone
Alternatives
  • flag-swallowtail: the swallowtail cloth of the marking set; one cloth per product
  • flag-clock: flag for follow-up with a due date
  • flag-checkered: finish line or race
  • target: a goal or objective
Don’t confuse with
Also fits
  • bug: report abuse or a content problem (report)
  • whistleblower: reporting content (flag owns report)
  • important: mark an item for follow-up
Not for
  • goal (use target): a flag means milestone or report
  • report file (use file-chart): the flag means report abuse or a problem (report), not a report document
  • spam (use alert-octagon): flag means report or mark in general; spam is the octagon (mail convention)
  • language (use translate): the flag motif does not mean language
Tags
report, flag, mark, milestone
Category
Maps & places
Component name
FlagIcon
History
  • added

Family 5

More maps & places icons

For agents

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

Feedback