Flag icon

flat-ui:flag

The Flag icon (flat-ui:flag) is a free SVG icon from the Flat UI Icons set by Designmodo, Inc.. It is drawn on a 100 × 100 grid. Flat UI Icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Flat UI Icons
Author: Designmodo, Inc.
License: MIT
Size: 100 × 100

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="#6BC9F2"/><clipPath id="SVGlgah6cRj"><circle cx="50" cy="50" r="50"/></clipPath><path fill="#fff" fill-rule="evenodd" d="M29 99a2.5 2.5 0 1 1-5 0V17.5a2.5 2.5 0 1 1 5 0z" clip-path="url(#SVGlgah6cRj)" clip-rule="evenodd"/><path fill="#F29C1F" d="M100 73H60V25h40l-7 24z"/><path fill="#E57E25" fill-rule="evenodd" d="M60 73V27l9-8v46z" clip-rule="evenodd"/><path fill="#fff" d="m77.017 43.501l-10.791 3.625L65.933 58l-6.962-8.633L48 52.463l6.488-8.962L48 34.539l10.972 3.096L65.933 29l.293 10.875z" opacity=".6"/><path fill="#F0C419" d="M29 17h40v48H29z"/><path fill="#fff" d="m69 30.157l-6.028 7.478L52 34.539l6.488 8.962L52 52.463l10.972-3.097L69 56.843z"/></svg>

How to use the Flag icon

React

import { Icon } from "@iconify/react";

<Icon icon="flat-ui:flag" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="flat-ui:flag" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="flat-ui:flag" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[flat-ui--flag]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/flat-ui -->
<div class="i-flat-ui:flag"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="flat-ui:flag"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/flat-ui/flag.svg" alt="Flag icon" width="24" height="24">

Flag icon in other icon sets

Flag icon FAQ

Is the Flag icon free for commercial use?

Yes. Flat UI Icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Flag icon in React?

Install @iconify/react and render <Icon icon="flat-ui:flag" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Flag icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/flat-ui/flag.svg" alt="Flag icon">, or paste the SVG code inline to style it with CSS.

Browse all Flat UI Icons →