LGBT Pride Flags In Pure CSS

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