Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: wave. Pick another to preview it and update the animated code:

Simple Line Icons · SlFlag

Flag icon

A free flag icon from Simple Line Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known asreport iconcountry iconbanner iconmilestone icon
License
MIT license
Project
thesabbir.github.io
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/simple-line-icons/flag.json
components/icons/simple-line-icons-flag.tsx
import * as React from "react";

/**
 * Flag from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/simple-line-icons/flag. Sized in em, colored by currentColor.
 */
export function SlFlagIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 1024 1024"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M680 95.328c-160 0-202.655-96-405.312-96C144-.672 64 98.016 64 98.016v894.656c0 17.665 14.336 32 32 32s32-14.335 32-32V584.8c33.76-21.776 80.336-41.472 138.688-41.472 202.656 0 261.312 96 421.312 96s272-96 272-96v-544s-120 96-280 96zM896.001 510.72c-36.16 23.584-112.784 64.606-208 64.606-62.912 0-105.84-17.263-160.224-39.135-66.272-26.64-141.408-56.864-261.088-56.864-54.688 0-101.072 13.76-138.688 32.16V124.017c24.096-21.92 76.624-60.688 146.688-60.688 94.112 0 147.088 22.848 203.184 47.008 55.872 24.08 113.664 48.992 202.128 48.992 85.248 0 160.128-23.568 216-48.912V510.72z"
      />
    </svg>
  );
}
With react-icons
import { SlFlag } from "react-icons/sl";

export function Example() {
  return <SlFlag className="size-5" />;
}
flag.svg
<svg
  viewBox="0 0 1024 1024"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M680 95.328c-160 0-202.655-96-405.312-96C144-.672 64 98.016 64 98.016v894.656c0 17.665 14.336 32 32 32s32-14.335 32-32V584.8c33.76-21.776 80.336-41.472 138.688-41.472 202.656 0 261.312 96 421.312 96s272-96 272-96v-544s-120 96-280 96zM896.001 510.72c-36.16 23.584-112.784 64.606-208 64.606-62.912 0-105.84-17.263-160.224-39.135-66.272-26.64-141.408-56.864-261.088-56.864-54.688 0-101.072 13.76-138.688 32.16V124.017c24.096-21.92 76.624-60.688 146.688-60.688 94.112 0 147.088 22.848 203.184 47.008 55.872 24.08 113.664 48.992 202.128 48.992 85.248 0 160.128-23.568 216-48.912V510.72z"
  />
</svg>
Attribution
"Flag" icon from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), licensed under MIT license.

Related icons: report, country, banner, milestone

Flag icon in other sets