This is a pure CSS library that can be included in your project to display LGBT+ pride flags as either large images, or small icons. It should be straightforward to install and use, and will be updated with new options and flags as they become available.
npm install @risadams/pride-flags<head>
<link rel="stylesheet" href="dist/pride-flags.min.css" />
</head>
<body>
<div class="flag progress" role="img"></div>
<div class="flag icon progress"></div>
</body>All flags with examples can be seen in this post: https://risadams.com/blog/2025/05/05/new-project-release-pride-flags
- ally-pride
- gilbert-baker
- intersex-inclusive
- new-pride
- philadelphia
- pink-triangle
- pride-1978
- pride-of-africa
- progress
- queer
- social-justice
- traditional
- agender
- androgyne
- bigender
- demiboy
- demigender
- demigirl
- genderfluid
- genderflux
- genderqueer
- hijra
- metagender
- neutrois
- nonbinary
- pangender
- transgender
- unlabeled
- abrosexual
- asexual
- bisexual
- demisexual
- gay-men
- graysexual
- lesbian
- omnisexual
- pansexual
- polysexual
- sapphic
- twink
- aromantic
- demiromantic
- polyamory
- polyamorous-new
- bear-brotherhood
- drag
- intersex
- labrys
- leather
- puppy
- rubber
- trans-inclusive
- aromantic-spectrum
- asexual-spectrum
If you think this could be better, please open an issue!
Please note that all interactions in this organization fall under our Code of Conduct.
MIT © 1996+ Ris Adams