Skip to content
Create your own WordPress pride flag SVG
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.

WordPress Pride Flags 🏳️‍🌈 🎉

Create your own downloadable WordPress pride flag SVG.

There are some predefined pride flags already configured, or you can customize your own with as many rows as you want. There are some colors preset that work well together, or you can set your own colors using hex codes or rgb().

The pre-set flags are:

  • Agender
  • Aromantic
  • Asexual
  • Bisexual
  • Genderfluid
  • Genderqueer
  • LGBTQ #MoreColorMorePride
  • LGBTQ (Rainbow)
  • Nonbinary
  • Pansexual
  • Polysexual
  • Transgender


To run this locally, you can clone and install the repo with the following commands

git clone
cd queeromattic-flags
npm install
npm start

Now you can open http://localhost:3000 to see the app. This does not live-reload, if you make any changes you'll need to halt and restart the process.

If you want to keep watch of your files while working, you can run npm run watch. This runs off a webpack server, rather than the express server, so downloading the SVGs won't work with this method.


The CSS is generated from the Sass files in src/scss, if you want to update styles, do so in these files, not the generated style.css file.


Original Queeromattic flag by @hugobaeta, with bisexual and transgender variations by @melchoyce. Other color combos and the rest of the app by @ryelle.

This project was created using create-react-app, Sass, and SVG magic

You can’t perform that action at this time.