Today I'm thrilled to announce the next release of Pride Flags, a pure CSS library that empowers developers to easily incorporate LGBTQ+ pride flags into their web projects. This lightweight, accessible solution lets you display flags as either full-sized images or compact icons with minimal effort and maximum impact.
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.1.0
The library currently includes over 50 flags categorized into:
- 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 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.
Installation and Setup
Getting started with Pride Flags is straightforward. You can install it via npm:
npm install @risadams/pride-flags
Or include it directly via CDN:
<link rel="stylesheet" href="https://unpkg.com/@risadams/pride-flags/dist/pride-flags.min.css">
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>
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
- Smaller footprint: The entire library is around 10KB minified
- 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 | ||
| 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 | ||
| Demiboy | ||
| Demigender | ||
| Demigirl | ||
| Genderfluid | ||
| Genderflux | ||
| Genderqueer | ||
| Hijra | ||
| Metagender | ||
| Neutrois | ||
| Nonbinary | ||
| Pangender | ||
| Transgender | ||
| Unlabeled |
Sexual Orientation Flags
| Flag Name | Flag | Icon |
|---|---|---|
| Abrosexual | ||
| Asexual | ||
| Bisexual | ||
| Demisexual | ||
| Gay Men | ||
| Graysexual | ||
| Lesbian | ||
| Omnisexual | ||
| Pansexual | ||
| Polysexual | ||
| Sapphic | ||
| Twink |
Romantic Orientation Flags
| Flag Name | Flag | Icon |
|---|---|---|
| Aromantic | ||
| Demiromantic |
Relationship Structure Flags
| Flag Name | Flag | Icon |
|---|---|---|
| Polyamory |
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 |
