Author: | risadams |
---|---|
Views Total: | 319 views |
Official Page: | Go to website |
Last Update: | June 17, 2022 |
License: | MIT |
Preview:

Description:
A set of LGBT pride flags and icons that are easy to implement with pure CSS and HTML.
Pride Flags Included:
- Gilbert Baker
- 1978
- Traditional Gay
- Philadelphia
- Progress
- Intersex-Inclusive
- New
- Social Justice
- Ally
- Pink Triangle Flag
- Intersex
- Labrys Lesbian
- Pride of Africa flag
- Drag
- Puppy
- Leather
- Rubber
- Lesbian
- Bear Brotherhood Flag
- Gay Male
- Agender
- Bigender
- Metagender
- Transgender
- Genderfluid
- Aromantic
- Abrosexual
- Graysexual
- Hijra
- Bisexual
- Demisexual
- Demiromantic
- Nonbinary
- Asexual
- Pansexual
- Genderqueer
- Polysexual
- Polyamory Flag (no scale)
- Twink
- Androgyne Flag
How to use it:
1. Download and load the stylesheet pride-flags.min.css.
<link rel="stylesheet" href="dist/pride-flags.min.css" />
2. Add pride flags to the page using the following CSS classes.
<section> <h2>Gilbert Baker Pride Flag</h2> <div class="flag gilbert-baker" role="img" aria-label="Gilbert Baker Pride Flag. Eight vertical bars of equal size: hot pink, red, orange, yellow, green, turquoise, blue, and indigo."> </div> </section> <section> <h2>1978 Pride Flag</h2> <div class="flag pride-1978" role="img" aria-label="1978 Pride Flag. Seven vertical bars of equal size: red, orange, yellow, green, turquoise, blue, and indigo"> </div> </section> <section> <h2>Traditional Gay Pride Flag</h2> <div class="flag traditional" role="img" aria-label="Traditional Gay Pride Flag. Six vertical bars of equal size: red, orange, yellow, green, blue, and indigo"> </div> </section> <section> <h2>Philadelphia Pride Flag</h2> <div class="flag philadelphia" role="img" aria-label="Philadelphia Pride Flag. Eight vertical bars of equal size: black, brown, red, orange, yellow, green, blue, and indigo."> </div> </section> <section> <h2>Progress Pride Flag</h2> <div class="flag progress" role="img" aria-label="Progress Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. On the left side, it has triangles of color: white, pink, light blue, brown, and black."> </div> </section> <section> <h2>Intersex-Inclusive Pride Flag</h2> <div class="flag intersex-inclusive" role="img" aria-label="Intersex-Inclusive Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. On the left side, it has triangles of color: yellow (with a violet ring inside), white, pink, light blue, brown, and black."> </div> </section> <section> <h2>New Pride Flag</h2> <div class="flag new-pride" role="img" aria-label="New Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. And diagonally from top-left to bottom-right (until half) bars of white, pink, light blue, brown, and black."> </div> </section> <section> <h2>Social Justice Pride Flag</h2> <div class="flag social-justice" role="img" aria-label="New Pride Flag. The traditional gay pride flag with 6 bars: red, orange, yellow, green, blue, and indigo. And triangles on the right side: red, blue, and black."> </div> </section> <section> <h2>Ally Pride Flag</h2> <div class="flag ally-pride" role="img" aria-label="Ally Pride Flag. Six bars of equal height in black and white. The traditional gay pride flag is on top cropped in an A shape"> </div> </section> <section> <h2>Pink Triangle Flag</h2> <div class="flag pink-triangle" role="img" aria-label="Pink Triangle Flag. An inverted pink triangle over a black background."></div> </section> <section> <h2>Intersex Pride Flag</h2> <div class="flag intersex" role="img" aria-label="Intersex Pride Flag. A yellow flag with a purple ring in the center"></div> </section> <section> <h2>Labrys Lesbian Pride Flag</h2> <div class="flag labrys" role="img" aria-label="Labrys Lesbian Pride Flag. A double-side white axe, inside a black inverted triangle over a purple background."> </div> </section> <section> <h2>Pride of Africa flag</h2> <div class="flag pride-of-africa" role="img" aria-label="Pride of Africa Flag. Colorful cubist design divided in 6 columns and 2 rows with shapes that forms the letters 'Pride of africa'"> </div> </section> <section> <h2>Drag Pride Flag</h2> <div class="flag drag" role="img" aria-label="drag Pride Flag. Three vertical bars of equal size purple, white, and blue. A pink crown with stars in the center."> </div> </section> <section> <h2>Puppy Pride Flag</h2> <div class="flag puppy" role="img" aria-label="Puppy Pride Flag. Diagonal black and blue lines with a white line in the middle. There is a red bone at the center of the flag."> </div> </section> <section> <h2>Leather Pride Flag</h2> <div class="flag leather" role="img" aria-label="Leather Pride Flag. Nine vertical bars of equal size black and blue intercalated. The middle one os white, and it has a heart at the top left."> </div> </section> <section> <h2>Rubber Pride Flag</h2> <div class="flag rubber" role="img" aria-label="Rubber Pride Flag. Lines of black, red, and yellow, forming some angles."></div> </section> <section> <h2>Lesbian Pride Flag</h2> <div class="flag lesbian" role="img" aria-label="Lesbian Pride Flag. Seven vertical bars of equal size: three shades of red/orange (to lighter), white, and three shades of pink (to darker)"> </div> </section> <section> <h2>Bear Brotherhood Flag</h2> <div class="flag bear-brotherhood" role="img" aria-label="Bear Brotherhood Pride Flag. Seven vertical bars of equal size: four shades of brown (to lighter), white, gray, and black."> </div> </section> <section> <h2>Gay Male Pride Flag</h2> <div class="flag trans-inclusive" role="img" aria-label="trans-inclusive gay men's Pride Flag. Seven vertical bars of equal size: three shades of green (to lighter), white, and three shades of blue (to darker)."> </div> </section> <section> <h2>Agender Pride Flag</h2> <div class="flag agender" role="img" aria-label="Agender Pride Flag. Seven vertical bars of equal size: black, gray, white, light green, white, gray, black."> </div> </section> <section> <h2>Bigender Pride Flag</h2> <div class="flag bigender" role="img" aria-label="Bigender Pride Flag. Seven vertical bars of equal size: dark pink, light pink, purple, white, purple, light blue, blue."> </div> </section> <section> <h2>Metagender Pride Flag</h2> <div class="flag metagender" role="img" aria-label="Metagender Pride Flag. Seven vertical bars of equal size: black, lime, yellow, white, yellow, lime, and black."> </div> </section> <section> <h2>Transgender Pride Flag</h2> <div class="flag transgender" role="img" aria-label="Transgender Pride Flag. Five bars of equal height: light blue, pink, white, pink, light blue."> </div> </section> <section> <h2>Genderfluid Pride Flag</h2> <div class="flag genderfluid" role="img" aria-label="Genderfluid Pride Flag. Five bars of equal height: pink, white, fuchsia, black, and blue."></div> </section> <section> <h2>Aromantic Pride Flag</h2> <div class="flag aromantic" role="img" aria-label="Aromantic Pride Flag. Five bars of equal height: dark green, light green, white, gray, black."> </div> </section> <section> <h2>Abrosexual Pride Flag</h2> <div class="flag abrosexual" role="img" aria-label="Aromantic Pride Flag. Five bars of equal height: green, light green, white, light pink, hot pink."> </div> </section> <section> <h2>Graysexual Pride Flag</h2> <div class="flag graysexual" role="img" aria-label="Graysexual Pride Flag. Five bars of equal height: purple, gray, white, gray, and purple."></div> </section> <section> <h2>Hijra Pride Flag</h2> <div class="flag hijra" role="img" aria-label="Hijra Pride Flag. Five bars (first and last double the size as the others): light blue, white, dark red, white, light pink."> </div> </section> <section> <h2>Bisexual Pride Flag</h2> <div class="flag bisexual" role="img" aria-label="Bisexual Pride Flag. Three horizontal lines Fuchsia, Pink, and Blue. The middle one half the size of the others."> </div> </section> <section> <h2>Demisexual Pride Flag</h2> <div class="flag demisexual" role="img" aria-label="Demisexual Pride Flag. Three horizontal lines white, purple (thin line), and light gray. And a black triangle on the left side."> </div> </section> <section> <h2>Demiromantic Pride Flag</h2> <div class="flag demiromantic" role="img" aria-label="Demiromantic Pride Flag. Three horizontal lines white, green (thin line), and light gray. And a black triangle on the left side."> </div> </section> <section> <h2>Nonbinary Pride Flag</h2> <div class="flag nonbinary" role="img" aria-label="Nonbinary Pride Flag. Four horizontal lines of the same size yellow, white, purple, and black."> </div> </section> <section> <h2>Asexual Pride Flag</h2> <div class="flag asexual" role="img" aria-label="Asexual Pride Flag. Four horizontal lines of the same size black, gray, white, and violet."></div> </section> <section> <h2>Pansexual Pride Flag</h2> <div class="flag pansexual" role="img" aria-label="Pansexual Pride Flag. Three horizontal lines of the same size pink, gold, and light blue."></div> </section> <section> <h2>Genderqueer Pride Flag</h2> <div class="flag genderqueer" role="img" aria-label="Genderqueer Pride Flag. Three bars of equal height: light violet, white, and green."></div> </section> <section> <h2>Polysexual Pride Flag</h2> <div class="flag polysexual" role="img" aria-label="Polysexual Pride Flag. Three bars of equal height: magenta, light green, and light blue."></div> </section> <section> <h2>Polyamory Flag (no scale)</h2> <div class="flag polyamory" role="img" aria-label="Polyamory Pride Flag. Three horizontal lines of the same size blue, red, and black. The symbol of pi at the center in yellow."> </div> </section> <section> <h2>Twink Pride Flag</h2> <div class="flag twink" role="img" aria-label="Twink Pride Flag. Three horizontal lines of the same size pink, white, and yellow. In the center of the flag, two interlaced male symbols."> </div> </section> <section> <h2>Androgyne Flag</h2> <div class="flag androgyne" role="img" aria-label="Androgyne Pride Flag. Three vertical lines of the same size: pink, purple, and blue."></div> </section>
3. You can also display these flags as small icons.
<div class="flag icon pink-triangle"></div> <div class="flag icon gilbert-baker"></div> <div class="flag icon pride-1978"></div> <div class="flag icon traditional"></div> <div class="flag icon philadelphia"></div> <div class="flag icon progress"></div> <div class="flag icon intersex-inclusive"></div> <div class="flag icon new-pride"></div> <div class="flag icon social-justice"></div> <div class="flag icon ally-pride"></div> <div class="flag icon intersex"></div> <div class="flag icon labrys"></div> <div class="flag icon pride-of-africa"></div> <div class="flag icon drag"></div> <div class="flag icon puppy"></div> <div class="flag icon leather"></div> <div class="flag icon rubber"></div> <div class="flag icon lesbian"></div> <div class="flag icon bear-brotherhood"></div> <div class="flag icon trans-inclusive"></div> <div class="flag icon agender"></div> <div class="flag icon bigender"></div> <div class="flag icon metagender"></div> <div class="flag icon transgender"></div> <div class="flag icon genderfluid"></div> <div class="flag icon aromantic"></div> <div class="flag icon abrosexual"></div> <div class="flag icon graysexual"></div> <div class="flag icon hijra"></div> <div class="flag icon bisexual"></div> <div class="flag icon demisexual"></div> <div class="flag icon demiromantic"></div> <div class="flag icon nonbinary"></div> <div class="flag icon asexual"></div> <div class="flag icon pansexual"></div> <div class="flag icon genderqueer"></div> <div class="flag icon polysexual"></div> <div class="flag icon twink"></div> <div class="flag icon androgyne"></div>
Changelog:
06/17/2022
- Adjusted polyam symbol in icon sizes
06/16/2022
- Adding small icon modifier
How can I add burning flames and fiery brimstone to the flag using CSS only?
@George Floyd – Actually yes, here you go https://codepen.io/elifitch/pen/reqwJO