flag icon

flag-outline from IonIcons by Ben Sperry · Outline · MIT Free for personal and commercial use.

Name
flag-outline
Set
IonIcons
Style
Outline
Viewbox
512×512
License
MIT

2 other variants in IonIcons

flagflag-sharp

The same icon in other sets

flagAkar Iconsflag-filledAnt Design IconsflagBootstrap IconsflagBoxIcons v2flagBoxIcons v2 SolidflagCarbonflagCodiconsflagElement Plusflag-fillEva IconsflagFramework7 IconsflagFont Awesome 6 RegularflagFont Awesome 6 SolidflagFont Awesome RegularflagFont Awesome SolidflagFeather Iconsflag-outlineFlowbite Iconsflag-16-filledFluent UI System Iconsflag-16Fluent UI System Color Iconsflagcss.ggflagHeroIconsflagHumbleiconsflagIconParkflagIconPark OutlineflagIconPark Solid

Use the flag icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M80 464V68.14a8 8 0 0 1 4-6.9C91.81 56.66 112.92 48 160 48c64 0 145 48 192 48a199.5 199.5 0 0 0 77.23-15.77a2 2 0 0 1 2.77 1.85v219.36a4 4 0 0 1-2.39 3.65C421.37 308.7 392.33 320 352 320c-48 0-128-32-192-32s-80 16-80 16"/></svg>

React

import type { SVGProps } from "react";

export function IonFlagOutline(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="32" d="M80 464V68.14a8 8 0 0 1 4-6.9C91.81 56.66 112.92 48 160 48c64 0 145 48 192 48a199.5 199.5 0 0 0 77.23-15.77a2 2 0 0 1 2.77 1.85v219.36a4 4 0 0 1-2.39 3.65C421.37 308.7 392.33 320 352 320c-48 0-128-32-192-32s-80 16-80 16"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M80 464V68.14a8 8 0 0 1 4-6.9C91.81 56.66 112.92 48 160 48c64 0 145 48 192 48a199.5 199.5 0 0 0 77.23-15.77a2 2 0 0 1 2.77 1.85v219.36a4 4 0 0 1-2.39 3.65C421.37 308.7 392.33 320 352 320c-48 0-128-32-192-32s-80 16-80 16"/></svg>
</template>

CSS

.icon-flag-outline {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M80%20464V68.14a8%208%200%200%201%204-6.9C91.81%2056.66%20112.92%2048%20160%2048c64%200%20145%2048%20192%2048a199.5%20199.5%200%200%200%2077.23-15.77a2%202%200%200%201%202.77%201.85v219.36a4%204%200%200%201-2.39%203.65C421.37%20308.7%20392.33%20320%20352%20320c-48%200-128-32-192-32s-80%2016-80%2016%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%2232%22%20d%3D%22M80%20464V68.14a8%208%200%200%201%204-6.9C91.81%2056.66%20112.92%2048%20160%2048c64%200%20145%2048%20192%2048a199.5%20199.5%200%200%200%2077.23-15.77a2%202%200%200%201%202.77%201.85v219.36a4%204%200%200%201-2.39%203.65C421.37%20308.7%20392.33%20320%20352%20320c-48%200-128-32-192-32s-80%2016-80%2016%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/flag-outline.svg?color=%231a73e8&size=48