Flag Pride Progress icon
In the LGBTQ+ community, we signify our pride with flags. With many different identities in the community, there comes many different flags to know.This pride flag has evolved from the Philadelphia Pride Flag and was created by Daniel Quaser. Quasar added a white, pink, and light blue stripe to represent the Trans community. While the black and brown stripes still represented communities of color, the black stripe is also a nod the thousands of individuals that the community lost during the HIV/AIDS crisis in 1980s and 1990s. Since its creation, the flag has become very popular. The Flag Pride Progress icon is part of Microsoft's Fluent UI System Icons, available here in the filled style in 6 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Filled
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Filled, 24 px
ic_fluent_flag_pride_progress_24_filled.svg
Flag Pride Progress icon in React
npm install @fluentui/react-icons
import { FlagPrideProgress24Filled } from "@fluentui/react-icons";
export function Example() {
return <FlagPrideProgress24Filled aria-label="Flag Pride Progress" />;
}Use the Flag Pride Progress icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { FlagPrideProgress24Filled } from "@fluentui/react-icons";
export function Example() {
return <FlagPrideProgress24Filled aria-label="Flag Pride Progress" />;
}Coding agents can look up this component through the Fluent Icons MCP server.
Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_flag_pride_progress_24_filled.svg" width="24" height="24" alt="Flag Pride Progress"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4H20V6.5H4V4Z" fill="#E62C46"/>
<path d="M4 6H20V8.5H4V6Z" fill="#F36D38"/>
<path d="M4 8H20V10.5H4V8Z" fill="#FFD23E"/>
<path d="M4 10H20V12.5H4V10Z" fill="#61BC51"/>
<path d="M4 12H20V14H4V12Z" fill="#1793E8"/>
<path d="M4 13.5H20V15.25H4V13.5Z" fill="#B73FBB"/>
<path d="M15 10L9 4H7V15.5H9.5L15 10Z" fill="#5B3B1C"/>
<path d="M12.5 10L6.5 4H4.5V15.5H7L12.5 10Z" fill="#8ED4EA"/>
<path d="M10 10L4 4V16L10 10Z" fill="#F3B2C7"/>
<path d="M7.5 10L4.5 7L4 10L4.5 13L7.5 10Z" fill="white"/>
<path d="M10 3H3.75C3.33579 3 3 3.33578 3 3.75V21.25C3 21.6642 3.33579 22 3.75 22C4.16421 22 4.5 21.6642 4.5 21.25L4.5 16.5H10.5L10.5303 16.5303L10.5607 16.5H20.25C20.6642 16.5 21 16.1642 21 15.75V3.75C21 3.33578 20.6642 3 20.25 3H10.0607L10.0303 2.96967L10 3ZM9.43934 4.5L14.9393 10L9.93934 15H4.5V4.5H9.43934ZM11.5607 4.5H19.5V15H12.0607L16.5303 10.5303C16.8232 10.2374 16.8232 9.76256 16.5303 9.46967L11.5607 4.5Z" fill="currentColor"/></svg>Details
| Name | Flag Pride Progress |
|---|---|
| Styles | Filled |
| Sizes | 16 px, 20 px, 24 px, 28 px, 32 px, 48 px |
| Filled file | ic_fluent_flag_pride_progress_24_filled.svg |
| React (Filled) | FlagPrideProgress16Filled, FlagPrideProgress20Filled, FlagPrideProgress24Filled, FlagPrideProgress28Filled, FlagPrideProgress32Filled, FlagPrideProgress48Filled |
| License | MIT (© Microsoft Corporation) |