flag icon

flag-fill from Mage Icons by MageIcons · Fill · Apache-2.0 Free for personal and commercial use.

Name: flag-fill
Set: Mage Icons
Style: Fill
Viewbox: 24×24
License: Apache 2.0

1 other variant in Mage Icons

Use the flag icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.372 3.86v10.88a.75.75 0 0 1-.43.68a11.85 11.85 0 0 1-4.64 1.16a5.9 5.9 0 0 1-3.71-1.21a4.45 4.45 0 0 0-2.85-1a7.16 7.16 0 0 0-3.61.73v6.13a.75.75 0 1 1-1.5 0V3.86a1 1 0 0 1 0-.15a.76.76 0 0 1 .31-.47c.38-.32 1.73-1.22 4.78-1.22a5.87 5.87 0 0 1 3.68 1.22a4.46 4.46 0 0 0 2.85 1a10.3 10.3 0 0 0 4-1a.74.74 0 0 1 .72.05a.73.73 0 0 1 .4.57"/></svg>

React

import type { SVGProps } from "react";

export function MageFlagFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.372 3.86v10.88a.75.75 0 0 1-.43.68a11.85 11.85 0 0 1-4.64 1.16a5.9 5.9 0 0 1-3.71-1.21a4.45 4.45 0 0 0-2.85-1a7.16 7.16 0 0 0-3.61.73v6.13a.75.75 0 1 1-1.5 0V3.86a1 1 0 0 1 0-.15a.76.76 0 0 1 .31-.47c.38-.32 1.73-1.22 4.78-1.22a5.87 5.87 0 0 1 3.68 1.22a4.46 4.46 0 0 0 2.85 1a10.3 10.3 0 0 0 4-1a.74.74 0 0 1 .72.05a.73.73 0 0 1 .4.57"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.372 3.86v10.88a.75.75 0 0 1-.43.68a11.85 11.85 0 0 1-4.64 1.16a5.9 5.9 0 0 1-3.71-1.21a4.45 4.45 0 0 0-2.85-1a7.16 7.16 0 0 0-3.61.73v6.13a.75.75 0 1 1-1.5 0V3.86a1 1 0 0 1 0-.15a.76.76 0 0 1 .31-.47c.38-.32 1.73-1.22 4.78-1.22a5.87 5.87 0 0 1 3.68 1.22a4.46 4.46 0 0 0 2.85 1a10.3 10.3 0 0 0 4-1a.74.74 0 0 1 .72.05a.73.73 0 0 1 .4.57"/></svg>
</template>

CSS

.icon-flag-fill {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20.372%203.86v10.88a.75.75%200%200%201-.43.68a11.85%2011.85%200%200%201-4.64%201.16a5.9%205.9%200%200%201-3.71-1.21a4.45%204.45%200%200%200-2.85-1a7.16%207.16%200%200%200-3.61.73v6.13a.75.75%200%201%201-1.5%200V3.86a1%201%200%200%201%200-.15a.76.76%200%200%201%20.31-.47c.38-.32%201.73-1.22%204.78-1.22a5.87%205.87%200%200%201%203.68%201.22a4.46%204.46%200%200%200%202.85%201a10.3%2010.3%200%200%200%204-1a.74.74%200%200%201%20.72.05a.73.73%200%200%201%20.4.57%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20.372%203.86v10.88a.75.75%200%200%201-.43.68a11.85%2011.85%200%200%201-4.64%201.16a5.9%205.9%200%200%201-3.71-1.21a4.45%204.45%200%200%200-2.85-1a7.16%207.16%200%200%200-3.61.73v6.13a.75.75%200%201%201-1.5%200V3.86a1%201%200%200%201%200-.15a.76.76%200%200%201%20.31-.47c.38-.32%201.73-1.22%204.78-1.22a5.87%205.87%200%200%201%203.68%201.22a4.46%204.46%200%200%200%202.85%201a10.3%2010.3%200%200%200%204-1a.74.74%200%200%201%20.72.05a.73.73%200%200%201%20.4.57%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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

flag icon

1 other variant in Mage Icons

The same icon in other sets

Use the flag icon

SVG

React

Vue

CSS