mirror of https://github.com/b3yc0d3/twemoji-flags.git synced 2026-05-10 14:02:46 +02:00

Pride Flags in Twemoji Flag style

css flags minimal pride-flags sexuality svg twemoji

JavaScript 66.3%
HTML 24.9%
SCSS 8.8%

Find a file

Nik K. 1eee036f25 Merge pull request #9 from b3yc0d3/develop v1.3.0 1.3.0 add 13 new flags		2026-05-10 12:05:21 +02:00
.github	switcht to a js build script	2024-02-07 21:08:28 +01:00
assets	add new flag svgs	2026-05-03 20:16:16 +01:00
.gitignore	gitignore ds store files	2026-05-03 20:17:50 +01:00
DEMO.html	add new flags to demo html	2026-05-03 20:16:37 +01:00
LICENSE	Updated Licenses	2022-07-22 00:28:12 +02:00
LICENSE-GRAPHICS	Updated Licenses	2022-07-22 00:28:12 +02:00
package-lock.json	updated build script and gitignore	2026-05-02 11:32:16 +02:00
package.json	updated version number	2026-05-10 11:58:51 +02:00
README.md	update badge count	2026-05-03 20:17:42 +01:00

README.md

twemoji-flags

Pride flags in the style of Twemojis.

Emojicons

Flag	Name	Filename
	Abrosexual Flag	`abrosexual_flag.svg`
	Achillean Flag	`achillean_flag.svg`
	Agender Flag	`agender_flag.svg`
	Androsexual Flag	`androsexual_flag.svg`
	Aroace Flag	`aroace_flag.svg`
	Aromantic Flag	`aromantic_flag.svg`
	Asexual Flag	`asexual_flag.svg`
	Aspec Flag	`aspec_flag.svg`
	Bisexual Flag	`bi_flag.svg`
	Ceres Flag	`ceres_flag.svg`
	Demiboy Flag	`demiboy_flag.svg`
	Demiflux Flag	`demiflux_flag.svg`
	Demigender Flag	`demigender_flag.svg`
	Demigirl Flag	`demigirl_flag.svg`
	Demiromantic Flag	`demiromantic_flag.svg`
	Demisexual Flag	`demisexual_flag.svg`
	Femboy Flag	`femboy_flag.svg`
	Gay Men Flag	`gay_men_flag.svg`
	Genderfluid Flag	`genderfluid_flag.svg`
	Genderflux Flag	`genderflux_flag.svg`
	Genderqueer NB 1 Flag	`genderqueer_nb1_flag.svg`
	Genderqueer NB Flag	`genderqueer_nb_flag.svg`
	Gynesexual Flag	`gynesexual_flag.svg`
	Heterosexual Flag	`hetero_flag.svg`
	Intersexual Flag	`intersexualtiy_flag.svg`
	Lesbian Flag	`lesbian_flag.svg`
	Neutrois Flag	`neutrois_flag.svg`
	NB Flag	`nb_flag.svg`
	Omnisexual Flag	`omni_flag.svg`
	Pansexual Flag	`pan_flag.svg`
	polyamory 1 Flag	`polyamory1_flag.svg`
	polyamory Flag	`polyamory_flag.svg`
	Polysexual	`polysexual_flag.svg`
	Progress Pride Flag	`progress_pride_flag.svg`
	Queer Flag	`queer_flag.svg`
	Straight Ally Flag	`straight_ally_flag.svg`
	Sapphic Flag	`sapphic.svg`
	Transgender Flag	`trans_flag.svg`
	Transfeminine Flag	`transfem_flag.svg`
	Transmasculine Flag	`transmasc_flag.svg`

	Just a template for those who wanna add more flags	`TEMPLATE_FLAG.svg`

Usage

Download the zip file form the github releases.
Unzip the archive, you will finde a LICENSE, twf.css and twf.min.css.
Put either or both of these CSS files (and the license file) in to your web projects resource folder.
Link in your html to either of these two CSS files, like the following
```
<link rel="stylesheet" href="path/to/twf.min.css">
```
For production project, we recommend to use the minified version (twf.min.css).

And now you can simply use all pride flags of twemoji-flags as simple as the following examples

<div class="abrosexual-flag"></div>
<div class="agender-flag"></div>
<div class="aroace-flag"></div>
<div class="aromantic-flag"></div>
<div class="asexual-flag"></div>
<div class="aspec-flag"></div>
<div class="androsexual-flag"></div>
<div class="bi-flag"></div>
<div class="ceres-flag"></div>
<div class="demiboy-flag"></div>
<div class="demiflux-flag"></div>
<div class="demigender-flag"></div>
<div class="demigirl-flag"></div>
<div class="demiromantic-flag"></div>
<div class="demisexual-flag"></div>
<div class="femboy-flag"></div>
<div class="gay-men-flag"></div>
<div class="genderfluid-flag"></div>
<div class="genderflux-flag"></div>
<div class="genderqueer-nb-flag"></div>
<div class="genderqueer-nb1-flag"></div>
<div class="gynesexual-flag"></div>
<div class="hetero-flag"></div>
<div class="intersexual-flag"></div>
<div class="lesbian-flag"></div>
<div class="neutrois-flag"></div>
<div class="nb-flag"></div>
<div class="omni-flag"></div>
<div class="pan-flag"></div>
<div class="polyamory-flag"></div>
<div class="polyamory1-flag"></div>
<div class="polysexual-flag"></div>
<div class="progress-pride-flag"></div>
<div class="queer-flag"></div>
<div class="straight-ally-flag"></div>
<div class="trans-flag"></div>
<div class="transfem-flag"></div>
<div class="transmasc-flag"></div>
<div class="achillean-flag"></div>
<div class="sapphic-flag"></div>

You can change the size of the emoji flags by setting the css variable --pride-flag-size to any size you like, default is 24px.

Build Process

It's as simple as just running the following commands, after cloning this repository.

npm install

npm run release

npm install

npm run dev

Contribution

You have a flag that isn't included yet? Feel free to make a pull request and add it OR open a Issue!

There are simple rules every pull request has to obay

Only make pull requests to the develop branch.
Your pull request title must be descriptive.
Flags MUST be put in to flags/ as SVG file. If you use Inkscape, export the file as "Plain SVG".