Version 1.2.0 of Pride Flags is out. It's a pure CSS library for putting LGBTQ+ pride flags on a web page, either full-sized or as small icons. This release adds ten new flags and corrects the colors or shapes of a dozen existing ones, after I checked every flag against a published reference.
Why I Built This Project
As both a developer and an ally, I've noticed the increasing need for accessible ways to represent diverse identities in digital spaces. About a year ago, I found myself repeatedly implementing custom CSS solutions for different pride flags across projects. Each implementation required researching exact color specifications, creating consistent layouts, and ensuring accessibility—a process that seemed unnecessarily repetitive.
That's when I realized: why not build a standardized, well-documented library that handles all of this complexity? The Pride Flags library was born from this simple idea—to make inclusive representation easier for developers while ensuring consistency, accessibility, and respect for the symbolism these flags carry.
The Importance of Representation
Representation matters. In our digital world, small symbols can communicate powerful messages of inclusion, support, and recognition. Pride flags aren't just colorful designs; they're visual affirmations of identity and community.
By making these flags easy to implement technically, we remove one barrier to representation. A developer who might have skipped including a flag due to implementation challenges now has a simple solution—allowing more sites to visibly support and recognize diverse communities.
What's Included in Pride Flags v1.2.0
The library now includes 63 flag classes in these categories:
- Traditional/Historical Pride Flags: Including traditional rainbow flags, the Baker flag, Progress Pride flag, and Philadelphia Pride flag
- Gender Identity Flags: Including transgender, nonbinary, genderfluid, and many more
- Sexual Orientation Flags: Including lesbian, bisexual, pansexual, asexual, and others
- Romantic Orientation Flags: Such as aromantic and demiromantic
- Relationship Structure Flags: Including both polyamory flags
- Community/Cultural Flags: Including leather pride, bear brotherhood, and others
- Spectrum Flags: For aromantic and asexual spectrums
Each flag is rendered using pure CSS, with attention to proper proportions, accurate colors, and accessibility considerations.
New in 1.2.0
Ten flags are new:
gay-uk: the UK variant of the gay pride flag, drawn with gradients so the diagonals keep their anglebxy,gxrl,nxnbinary,gendercreative,littlefluid: gender identity flagsdoeandpocket-gender: shapes that gradients can't draw, so they use a small inline SVG as a background layerlipstick-lesbian: the stripes-only version. The "with kiss" variant would have nearly tripled the stylesheet, so I left it out.polyamorous-new: the 2022 tricolor with a white chevron and a gold heart. The originalpolyamoryflag is still there.
Corrected in 1.2.0
I compared each flag side by side with its reference SVG (prideflags.org first, Wikimedia Commons for the rest). Several were wrong:
genderfluxhad the wrong colorsnonbinaryhad a dark gray bottom stripe where it should be blackpangenderhad eight bands and should have sevenlabryshad the wrong background colorintersexhad the wrong ring sizedemisexualanddemiromantichad incorrect triangle and stripe geometryprogressnow uses the rainbow from its own reference file, which differs slightly fromtraditionalbear-brotherhoodnow has a proper paw print
A handful of flags couldn't be checked because none of my references list them, and a few, like sapphic and asexual-spectrum, look suspect. FLAGS.md lists every flag's source and which ones are still unverified. If you know one is wrong, please open an issue.
Installation and Setup
Install it from npm:
npm install @risadams/pride-flags
Then import the stylesheet in your bundler:
import '@risadams/pride-flags';
That resolves to dist/pride-flags.min.css. If you don't use a bundler, link that file from node_modules instead.
You can also load it from a CDN. Pin the version so a future release can't change a flag under you:
<link rel="stylesheet" href="https://unpkg.com/@risadams/pride-flags@1.2.0/dist/pride-flags.min.css">
The Sass source (src/pride-flags.scss) is published in the package too, if you'd rather compile it yourself.
Usage Examples
Basic Usage
Adding a flag to your project is as simple as adding a div with the appropriate classes:
<!-- Full-sized Progress Pride flag -->
<div class="flag progress" role="img" aria-label="Progress Pride Flag"></div>
<!-- Icon-sized Transgender Pride flag -->
<div class="flag icon transgender" role="img" aria-label="Transgender Pride Flag"></div>
A full flag is 300px wide with a 14:9 aspect ratio. The icon class shrinks it to 3em wide, and you can add small (2em) or large (4em) next to it:
<div class="flag icon small bisexual" role="img" aria-label="Bisexual Pride Flag"></div>
<div class="flag icon large bisexual" role="img" aria-label="Bisexual Pride Flag"></div>
The class names are listed by category in the README, and the reference at the bottom of this post shows every one.
Flags have no text of their own, so always add role="img" and an aria-label. For the newer shaped flags like doe and pocket-gender, describe the shapes as well as the colors.
React Component Example
If you're using React, you might wrap the flags in a component:
function PrideFlag({ type, isIcon, label }) {
return (
<div
className={`flag ${isIcon ? 'icon' : ''} ${type}`}
role="img"
aria-label={label || `${type} pride flag`}
/>
);
}
// Usage
<PrideFlag type="bisexual" />
<PrideFlag type="nonbinary" isIcon={true} />
Styling and Customization
The flags come with sensible defaults, but you can easily customize the size:
/* Custom full-size flag */
.my-custom-flag-container .flag {
width: 300px;
height: 180px;
}
/* Custom icon size */
.my-navigation .flag.icon {
width: 24px;
height: 24px;
}
Accessibility Considerations
The library was built with accessibility in mind:
- All flags use
role="img"to ensure proper semantics - We recommend adding
aria-labelattributes for screen readers - The flags maintain proper color contrast ratios where possible
- They scale well without losing clarity
Technical Implementation
Under the hood, each flag is created using CSS gradients and color stops rather than image files. This approach offers several advantages:
- Reduced HTTP requests: No external images to load
- Perfect scaling: Looks crisp at any size
- Small footprint: The entire library is about 24KB minified, or roughly 6KB gzipped
- Easy customization: You can override any aspect with CSS
Future Plans
This is just the beginning for Pride Flags. I'm planning several enhancements:
- Additional flags and variants as they emerge in communities
- Framework-specific wrappers for popular libraries
- Interactive customization options
- Improved documentation and examples
Contributing
This project is community-driven, and contributions are welcome! Whether you want to add new flags, improve accessibility, fix bugs, or enhance documentation, check out the contribution guidelines.
Not sure where to start? The project has issues labeled "good first issue" specifically for newcomers.
The Power of Open Source
Pride Flags is released under the MIT license, making it freely available for personal and commercial projects. This decision was deliberate—to maximize the project's impact and ensure that representation tools are available to everyone, regardless of budget or project scale.
I believe in the power of open source to drive positive change. By collaborating on projects like this one, we create resources that can help make the web a more inclusive space—one flag at a time.
Try It Today
I invite you to give Pride Flags a try in your next project. Whether you're building an LGBTQ+ focused application, adding inclusive elements to an existing site, or simply showing support through representation, this library aims to make that process easier and more standardized.
Check out the GitHub repository to get started, and feel free to reach out with questions, suggestions, or contributions.
Let's build a more colorful, inclusive web together!
Complete Flag Reference
Below is a comprehensive reference of all flags available in the Pride Flags library, organized by category. This visual guide shows both the full-sized flag and icon version of each flag.
Traditional & Historical Pride Flags
| Flag Name | Flag | Icon |
|---|---|---|
| Ally Pride | ||
| Gay (UK Variant) | ||
| Gilbert Baker (Original 8-stripe) | ||
| Intersex Inclusive | ||
| New Pride | ||
| Philadelphia | ||
| Pink Triangle | ||
| Pride 1978 | ||
| Pride of Africa | ||
| Progress | ||
| Queer | ||
| Social Justice | ||
| Traditional |
Gender Identity Flags
| Flag Name | Flag | Icon |
|---|---|---|
| Agender | ||
| Androgyne | ||
| Bigender | ||
| Bxy | ||
| Demiboy | ||
| Demigender | ||
| Demigirl | ||
| Doe | ||
| Gender Creative | ||
| Genderfluid | ||
| Genderflux | ||
| Genderqueer | ||
| Gxrl | ||
| Hijra | ||
| Littlefluid | ||
| Metagender | ||
| Neutrois | ||
| Nonbinary | ||
| Nxnbinary | ||
| Pangender | ||
| Pocket Gender | ||
| Transgender | ||
| Unlabeled |
Sexual Orientation Flags
| Flag Name | Flag | Icon |
|---|---|---|
| Abrosexual | ||
| Asexual | ||
| Bisexual | ||
| Demisexual | ||
| Gay Men | ||
| Graysexual | ||
| Lesbian | ||
| Lipstick Lesbian | ||
| Omnisexual | ||
| Pansexual | ||
| Polysexual | ||
| Sapphic | ||
| Twink |
Romantic Orientation Flags
| Flag Name | Flag | Icon |
|---|---|---|
| Aromantic | ||
| Demiromantic |
Relationship Structure Flags
| Flag Name | Flag | Icon |
|---|---|---|
| Polyamory | ||
| Polyamory (2022 Tricolor) |
Community/Cultural Flags
| Flag Name | Flag | Icon |
|---|---|---|
| Bear Brotherhood | ||
| Drag | ||
| Intersex | ||
| Labrys | ||
| Leather | ||
| Puppy | ||
| Rubber | ||
| Trans Inclusive |
Spectrum Flags
| Flag Name | Flag | Icon |
|---|---|---|
| Aromantic Spectrum | ||
| Asexual Spectrum |
