HTML Pride Flags (Code)

VynxCodes

Profile


Code

<!--og pride flag | pride flag | progress flag | queer | unlabeled | bear (with paw) | bear (without paw)-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#ff69b4,#ff69b4 12.5%,#ff0000 12.5%,#ff0000 25%,#ff8e00 25%,#ff8e00 37.5%,#ffff02 37.5%,#ffff02 50%,#008e00 50%,#008e00 62.5%,#00c0c0 62.5%,#00c0c0 75%,#400098 75%,#400098 87.5%,#8e008e 87.5%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);line-height:20px;width:26px;"><div class="rounded d-inline-block" style="background:#000;clip-path:polygon(40% 0%,100% 50%,40% 100%,0% 100%,0 50%,0% 0%);width:50%;"><div class="rounded d-inline-block" style="background:#603917;clip-path:polygon(20% 0%,100% 50%,20% 100%,0% 100%,0 50%,0% 0%);width:80%;"><div class="rounded d-inline-block" style="background:#7cc0ea;clip-path:polygon(100% 50%,0 0,0 100%);width:70%;"><div class="rounded d-inline-block" style="background:#f498c0;clip-path:polygon(100% 50%,0 15%,0 85%);width:70%;"><div class="rounded d-inline-block" style="background:#fff;clip-path:polygon(100% 50%,0 30%,0 70%);width:55%;">&nbsp;</div></div></div></div></div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 11.1%,#9ad9eb 11.1%,#9ad9eb 22.2%,#02a4ec 22.2%,#02a4ec 33.3%,#b7e520 33.3%,#b7e520 44.4%,#fff 44.4%,#fff 55.5%,#fec80c 55.5%,#fec80c 66.6%,#fc6667 66.6%,#fc6667 77.7%,#feaec9 77.7%,#feaec9 88.8%,#000 88.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#e6f9e3,#e6f9e3 25%,#fff 25%,#fff 50%,#deeff9 50%,#deeff9 75%,#fae1c2 75%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#623500,#623500 14.3%,#d66300 14.3%,#d66300 28.6%,#fede63 28.6%,#fede63 42.9%,#fee7b9 42.9%,#fee7b9 57.2%,#fff 57.2%,#fff 71.5%,#545454 71.5%,#545454 85.8%,#000 85.8%);line-height:20px;width:26px;"><div style="background:url(https://i.imgur.com/5MJky6y.png) no-repeat 10% 12%;background-size:30%;">&nbsp;</div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#623500,#623500 14.3%,#d66300 14.3%,#d66300 28.6%,#fede63 28.6%,#fede63 42.9%,#fee7b9 42.9%,#fee7b9 57.2%,#fff 57.2%,#fff 71.5%,#545454 71.5%,#545454 85.8%,#000 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<!--transgender | nonbinary | genderqueer | gender nonconforming gnc | xenogender-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#5ac7ed,#5ac7ed 20%,#efa4b1 20%,#efa4b1 40%,#fff 40%,#fff 60%,#efa4b1 60%,#efa4b1 80%,#5ac7ed 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fff42c,#fff42c 25%,#fff 25%,#fff 50%,#9d59d2 50%,#9d59d2 75%,#000 75%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#b294d8,#b294d8 33.3%,#fff 33.3%,#fff 66.6%,#688a39 66.6%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#4f234c,#4f234c 22.2%,#97447c 22.2%,#97447c 33.3%,#5c97f7 33.3%,#5c97f7 44.4%,#ffe7f7 44.4%,#ffe7f7 55.5%,#5c97f7 55.5%,#5c97f7 66.6%,#97447c 66.6%,#97447c 77.7%,#4f234c 77.7%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#ff6692,#ff6692 14.3%,#ff9a98 14.3%,#ff9a98 28.6%,#ffb883 28.6%,#ffb883 42.9%,#fbffa7 42.9%,#fbffa7 57.2%,#85bcff 57.2%,#85bcff 71.5%,#9d85ff 71.5%,#9d85ff 85.8%,#a510ff 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<!--transfeminine 1 | transfeminine 2 | transfeminine 3-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#74dfff,#74dfff 14.3%,#fee1ed 14.3%,#fee1ed 28.6%,#ffb5d7 28.6%,#ffb5d7 42.9%,#fe8dbf 42.9%,#fe8dbf 57.2%,#ffb5d7 57.2%,#ffb5d7 71.5%,#fee1ed 71.5%,#fee1ed 85.8%,#74dfff 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fc81c8,#fc81c8 20%,#bd0d61 20%,#bd0d61 40%,#fbc6ff 40%,#fbc6ff 60%,#bd0d61 60%,#bd0d61 80%,#fc81c8 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fff,#fff 25%,#f7adb9 25%,#f7adb9 50%,#da4386 50%,#da4386 75%,#272929 75%);line-height:20px;width:26px;">&nbsp;</div>

<!--transmasculine 1 | transmasculine 2 | transmasculine 3-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#ff8bbf,#ff8bbf 14.3%,#cdf5ff 14.3%,#cdf5ff 28.6%,#9aedff 28.6%,#9aedff 42.9%,#76e0ff 42.9%,#76e0ff 57.2%,#9aedff 57.2%,#9aedff 71.5%,#cdf5ff 71.5%,#cdf5ff 85.8%,#ff8bbf 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#00a2e8,#00a2e8 20%,#1c0697 20%,#1c0697 40%,#c0f4fe 40%,#c0f4fe 60%,#1c0697 60%,#1c0697 80%,#00a2e8 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fff,#fff 25%,#5fcdf5 25%,#5fcdf5 50%,#456fb6 50%,#456fb6 75%,#2b2d2d 75%);line-height:20px;width:26px;">&nbsp;</div>

<!--transneutral 1 | transneutral 2 | transneutral 3 | transneutral 4-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#73deff,#73deff 14.3%,#b6f583 14.3%,#b6f583 28.6%,#73c950 28.6%,#73c950 42.9%,#2f9c1d 42.9%,#2f9c1d 57.2%,#73c950 57.2%,#73c950 71.5%,#b6f583 71.5%,#b6f583 85.8%,#ff8bbf 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#74c84f,#74c84f 20%,#2f9c1d 20%,#2f9c1d 40%,#b6f583 40%,#b6f583 60%,#2f9c1d 60%,#2f9c1d 80%,#74c84f 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fff,#fff 25%,#4bd274 25%,#4bd274 50%,#00741c 50%,#00741c 75%,#00210c 75%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#b7a4d0,#b7a4d0 20%,#231831 20%,#231831 40%,#fff 40%,#fff 60%,#89466a 60%,#89466a 80%,#f5a9b8 80%);line-height:20px;width:26px;">&nbsp;</div>

<!--transandrogyne 1 | transandrogyne 2 | transandrogyne 3-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#734f96,#734f96 20%,#b57edc 20%,#b57edc 40%,#fff 40%,#fff 60%,#b57edc 60%,#b57edc 80%,#734f96 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fff,#fff 25%,#b975ea 25%,#b975ea 50%,#7b04a5 50%,#7b04a5 75%,#140021 75%);line-height:20px;width:26px;">&nbsp;</div>

<!--agender | neutrois | demigirl | demiboy | demiflux | librafeminine | libramasculine-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 14.3%,#bcc5c6 14.3%,#bcc5c6 28.6%,#fff 28.6%,#fff 42.9%,#b5f582 42.9%,#b5f582 57.2%,#fff 57.2%,#fff 71.5%,#bcc5c6 71.5%,#bcc5c6 85.8%,#000 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(0deg,#000,#000 33.3%,#2f9d1d 33.3%,#2f9d1d 66.6%,#fff 66.6%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#7f7f7f,#7f7f7f 14.3%,#c4c4c4 14.3%,#c4c4c4 28.6%,#ffaec9 28.6%,#ffaec9 42.9%,#fff 42.9%,#fff 57.2%,#ffaec9 57.2%,#ffaec9 71.5%,#c4c4c4 71.5%,#c4c4c4 85.8%,#7f7f7f 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#7f7f7f,#7f7f7f 14.3%,#c4c4c4 14.3%,#c4c4c4 28.6%,#9ad9eb 28.6%,#9ad9eb 42.9%,#fff 42.9%,#fff 57.2%,#9ad9eb 57.2%,#9ad9eb 71.5%,#c4c4c4 71.5%,#c4c4c4 85.8%,#7f7f7f 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#7f7f7f,#7f7f7f 14.3%,#dadada 14.3%,#dadada 28.6%,#ffb6b8 28.6%,#ffb6b8 42.9%,#f4f691 42.9%,#f4f691 57.2%,#9ad9eb 57.2%,#9ad9eb 71.5%,#dadada 71.5%,#dadada 85.8%,#7f7f7f 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 14.3%,#a3a3a3 14.3%,#a3a3a 28.6%,#fff 28.6%,#fff 42.9%,#c6568f 42.9%,#c6568f 57.2%,#fff 57.2%,#fff 71.5%,#a3a3a3 71.5%,#a3a3a3 85.8%,#000 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 14.3%,#a3a3a3 14.3%,#a3a3a 28.6%,#fff 28.6%,#fff 42.9%,#56c6c4 42.9%,#56c6c4 57.2%,#fff 57.2%,#fff 71.5%,#a3a3a3 71.5%,#a3a3a3 85.8%,#000 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<!--genderflux | girlflux | boyflux-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#ec728f,#ec728f 16.7%,#e69ab0 16.7%,#e69ab0 33.4%,#c4c4c4 33.3%,#c4c4c4 50.1%,#76d5ea 50.1%,#76d5ea 66.8%,#3bc3ec 66.8%,#3bc3ec 83.5%,#f2e886 83.5%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#f9bb9c,#f9bb9c 14.3%,#cc344c 14.3%,#cc344c 28.6%,#7d0008 28.6%,#7d0008 42.9%,#ffb943 42.9%,#ffb943 57.2%,#7d0008 57.2%,#7d0008 71.5%,#cc344c 71.5%,#cc344c 85.8%,#f9bb9c 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#d7e9f8,#d7e9f8 14.3%,#6facf5 14.3%,#6facf5 28.6%,#023670 28.6%,#023670 42.9%,#9eedac 42.9%,#9eedac 57.2%,#023670 57.2%,#023670 71.5%,#6facf5 71.5%,#6facf5 85.8%,#d7e9f8 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<!--genderfluid | genderfae | genderfaun-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#fd74a0,#fd74a0 20%,#fff 20%,#fff 40%,#be16d7 40%,#be16d7 60%,#000 60%,#000 80%,#333ebc 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#98c4a6,#98c4a6 14.3%,#c4dfb0 14.3%,#c4dfb0 28.6%,#f9face 28.6%,#f9face 42.9%,#fff 42.9%,#fff 57.2%,#fca4c5 57.2%,#fca4c5 71.5%,#dc8be5 71.5%,#dc8be5 85.8%,#ab7fde 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fcc689,#fcc689 14.3%,#fff09d 14.3%,#fff09d 28.6%,#fbf9cc 28.6%,#fbf9cc 42.9%,#fff 42.9%,#fff 57.2%,#8edfd8 57.2%,#8edfd8 71.5%,#8dabdc 71.5%,#8dabdc 85.8%,#9681eb 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<!--androgyne | bigender 1 | bigender 2 | pangender-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(90deg,#ff007f,#ff007f 33.3%,#9832ff 33.3%,#9832ff 66.6%,#00b7e7 66.6%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#ed79aa,#ed79aa 20%,#fdf44d 20%,#fdf44d 40%,#fff 40%,#fff 60%,#ae6dbf 60%,#ae6dbf 80%,#719de2 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#6992d9,#6992d9 14.3%,#90c3e8 14.3%,#90c3e8 28.6%,#fff 28.6%,#fff 42.9%,#c4a4ea 42.9%,#c4a4ea 57.2%,#fff 57.2%,#fff 71.5%,#f8abc5 71.5%,#f8abc5 85.8%,#ed7aa8 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fff798,#fff798 14.3%,#ffddcd 14.3%,#ffddcd 28.6%,#ffebfb 28.6%,#ffebfb 42.9%,#fff 42.9%,#fff 57.2%,#ffebfb 57.2%,#ffebfb 71.5%,#ffddcd 71.5%,#ffddcd 85.8%,#fff798 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<!--sapphic | sunset lesbian | sappho-lesbian-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#fd8ba8,#fd8ba8 33.3%,#fbf2ff 33.3%,#fbf2ff 66.6%,#fd8ba8 66.6%);line-height:20px;width:26px;"><div style="background:url(https://upload.wikimedia.org/wikipedia/commons/2/2e/Violet_-_Sapphic.png) no-repeat center;background-size:22%;">&nbsp;</div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#d42c00,#d42c00 20%,#fd9855 20%,#fd9855 40%,#fff 40%,#fff 60%,#d161a2 60%,#d161a2 80%,#a20161 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#663399,#663399 25%,#ff6699 25%,#ff6699 50%,#ffcc33 50%,#ffcc33 75%,#66cc33 75%);line-height:20px;width:26px;">&nbsp;</div>

<!--achillean | vincian/gay man/gay male | cinthean | mlm/nblm-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#99c6ea,#99c6ea 33.3%,#f9fdea 33.3%,#f9fdea 66.6%,#99c6ea 66.6%);line-height:20px;width:26px;"><div style="background:url(https://upload.wikimedia.org/wikipedia/commons/0/0f/Carnation_Flower_-_Achillean.png) no-repeat center;background-size:38%;">&nbsp;</div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#018e71,#018e71 20%,#9ae9c3 20%,#9ae9c3 40%,#fff 40%,#fff 60%,#7cafe4 60%,#7cafe4 80%,#3c1379 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#052868,#052868 16.7%,#6517a6 16.7%,#6517a6 33.4%,#e6014a 33.3%,#e6014a 50.1%,#ed6286 50.1%,#ed6286 66.8%,#f89f89 66.8%,#f89f89 83.5%,#fff 83.5%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#a42388,#a42388 14.3%,#7b3ab2 14.3%,#7b3ab2 28.6%,#4f9cd1 28.6%,#4f9cd1 42.9%,#75eec3 42.9%,#75eec3 57.2%,#e8ffe5 57.2%,#e8ffe5 71.5%,#eec375 71.5%,#eec375 85.8%,#ee9376 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<!--diamoric | enbian | trixic | toric | neptunic | uranic-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#91f291,#91f291 33.3%,#fefdf3 33.3%, #fefdf3 66.6%,#91f291 66.6%);line-height:20px;width:26px;"><div style="background:url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/fd5829ed-efc1-4ca8-813f-8e31e4df26af/daeixzp-2e84eb60-662d-4780-a773-3404dbed7b52.png/v1/fill/w_905,h_883,strp/diamoric_myrtle_flower_by_pride_flags_daeixzp-pre.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTg4IiwicGF0aCI6IlwvZlwvZmQ1ODI5ZWQtZWZjMS00Y2E4LTgxM2YtOGUzMWU0ZGYyNmFmXC9kYWVpeHpwLTJlODRlYjYwLTY2MmQtNDc4MC1hNzczLTM0MDRkYmVkN2I1Mi5wbmciLCJ3aWR0aCI6Ijw9MTAxMiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.7SuW6AX87RL3uFAwFZU6faoEMR-5JYOfdgjVLGn6u7I) no-repeat center;background-size:23%;">&nbsp;</div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#ffb90f,#ffb90f 20%,#ffd483 20%,#ffd483 40%,#eee6e0 40%,#eee6e0 60%,#8fe98d 60%,#8fe98d 80%,#27af28 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#b453cc,#b453cc 20%,#edaeef 20%,#edaeef 40%,#ffc0ca 40%,#ffc0ca 60%,#ffe7ba 60%,#ffe7ba 80%,#ffb90f 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#b551ce,#b551ce 20%,#dea2de 20%,#dea2de 40%,#afefef 40%,#afefef 60%,#99fb99 60%,#99fb99 80%,#7dce7d 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#0399b8,#0399b8 16.7%,#39d6c8 16.7%,#39d6c8 33.4%,#74e9d4 33.3%,#74e9d4 50.1%,#a0e5ee 50.1%,#a0e5ee 66.8%,#99b0ea 66.8%,#99b0ea 83.5%,#9799ee 83.5%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#3b7bd6,#3b7bd6 16.7%,#4fa1f0 16.7%,#4fa1f0 33.4%,#69c9fb 33.3%,#69c9fb 50.1%,#9aebfc 50.1%,#9aebfc 66.8%,#fffbde 66.8%,#fffbde 83.5%,#fff2c6 83.5%);line-height:20px;width:26px;">&nbsp;</div>

<!--aroace | aromantic | asexual | aroallo | alloace | grayromantic | graysexual | demiromantic | demisexual-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#e38d00,#e38d00 20%,#edce00 20%,#edce00 40%,#fff 40%,#fff 60%,#62b0dd 60%,#62b0dd 80%,#1a3555 80%);height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#3ca542,#3ca542 20%,#a8d377 20%,#a8d377 40%,#fff 40%,#fff 60%,#a9a9a9 60%,#a9a9a9 80%,#000 80%);height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 25%,#7f7f7f 25%,#7f7f7f 50%,#fff 50%,#fff 75%,#670066 75%);height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#3ca542,#3ca542 20%,#a8d377 20%,#a8d377 40%,#fff 40%,#fff 60%,#fae34b 60%,#fae34b 80%,#e8ba00 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#c30000,#c30000 25%,#f96c6c 25%,#f96c6c 50%,#fff 50%,#fff 75%,#7f007f 75%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#087d16,#087d16 20%,#afb2af 20%,#afb2af 40%,#fff 40%,#fff 60%,#afb2af 60%,#afb2af 80%,#087d16 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#740395,#740395 20%,#aeb2aa 20%,#aeb2aa 40%,#fff 40%,#fff 60%,#aeb2aa 60%,#aeb2aa 80%,#740395 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fff,#fff 40%,#339933 40%,#339933 60%,#d2d2d2 60%);line-height:20px;width:26px;"><div class="rounded d-inline-block" style="background:#000;clip-path:polygon(100% 50%,0 0,0 100%);width:40%;">&nbsp;</div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fff,#fff 40%,#6d0070 40%,#6d0070 60%,#d2d2d2 60%);line-height:20px;width:26px;"><div class="rounded d-inline-block" style="background:#000;clip-path:polygon(100% 50%,0 0,0 100%);width:40%;">&nbsp;</div></div>

<!--angled aroace 1 | angled aroace 2 | quoiromantic | quoisexual | lithosexual | aroflux | aceflux | apothiromantic | apothisexual | aegoromantic | aegosexual-->

<div class="rounded d-inline-block" style="background-image:linear-gradient(#fbe230,#fbe230 20%,#fbfd7e 20%,#fbfd7e 40%,#f6ffaa 40%,#f6ffaa 60%,#ecebcc 60%,#ecebcc 80%,#19110d 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#f0cf52,#f0cf52 20%,#faf8c9 20%,#faf8c9 40%,#958478 40%,#958478 60%,#5e4d42 60%,#5e4d42 80%,#31271f 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 25%,#8cd855 25%,#8cd855 50%,#6ad2d8 50%,#6ad2d8 75%,#d2d2d2 75%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 25%,#fff 25%,#fff 50%,#98dd31 50%,#98dd31 75%,#25d0e6 75%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#f14751,#f14751 20%,#ff9f5e 20%,#ff9f5e 40%,#fff544 40%,#fff544 60%,#fff 60%,#fff 80%,#252525 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#ca1e57,#ca1e57 20%,#eb736f 20%,#eb736f 40%,#efe6b0 40%,#efe6b0 60%,#a9d275 60%,#a9d275 80%,#3ca648 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#c92067,#c92067 20%,#ec6d88 20%,#ec6d88 40%,#f8d1e0 40%,#f8d1e0 60%,#92469b 60%,#92469b 80%,#7f007f 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#008200,#008200 28.6%,#fff 28.6%,#fff 42.9%,#000 42.9%,#000 57.2%,#fff 57.2%,#fff 71.5%,#9c2423 71.5% 85.8%);line-height:20px;width:26px;"><div style="background:#000;margin:auto;width:80%;clip-path:polygon(20% 0%,10% 5%,42% 50%,10% 95%,20% 100%,50% 60%,80% 100%,90% 95%,58% 50%,90% 5%,80% 0,50% 40%);">&nbsp;</div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#606,#606 28.6%,#fff 28.6%,#fff 42.9%,#000 42.9%,#000 57.2%,#fff 57.2%,#fff 71.5%,#9c2423 71.5% 85.8%);line-height:20px;width:26px;"><div style="background:#000;margin:auto;width:80%;clip-path:polygon(20% 0%,10% 5%,42% 50%,10% 95%,20% 100%,50% 60%,80% 100%,90% 95%,58% 50%,90% 5%,80% 0,50% 40%);">&nbsp;</div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#087d15,#087d15 25%,#fff 25%,#fff 75%,#087d15 75%);line-height:20px;width:26px;"><div class="rounded" style="clip-path: polygon(0 0,0 50%,25% 50%,50% 99%,75% 50%,100% 50%,100% 0,75% 50%,25% 50%);background-image:linear-gradient(#000,#000 25%,#959595 25%,#959595 75%,#000 75%);">&nbsp;</div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#81007f,#81007f 25%,#fff 25%,#fff 75%,#81007f 75%);line-height:20px;width:26px;"><div class="rounded" style="clip-path: polygon(0 0,0 50%,25% 50%,50% 99%,75% 50%,100% 50%,100% 0,75% 50%,25% 50%);background-image:linear-gradient(#000,#000 25%,#959595 25%,#959595 75%,#000 75%);">&nbsp;</div></div>

 <!--m-spec | bisexual | pansexual | omnisexual | polysexual | abrosexual-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#724ec9,#724ec9 25%,#fff 25%,#fff 50%,#9eefff 50%,#9eefff 75%,#fe3d9b 75%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#d70170,#d70170 40%,#734f94 40%,#734f94 60%,#0039a7 60%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#ff218c,#ff218c 33.3%,#fed800 33.3%,#fed800 66.6%,#21b1ff 66.6%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#ff9ccd,#ff9ccd 20%,#ff53bd 20%,#ff53bd 40%,#270046 40%,#270046 60%,#675ffe 60%,#675ffe 80%,#8ca7ff 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#f61bb9,#f61bb9 33.3%,#07d669 33.3%,#07d669 66.6%,#1c92f5 66.6%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#75ca92,#75ca92 20%,#b4e4c9 20%,#b4e4c9 40%,#fff 40%,#fff 60%,#e795b6 60%,#e795b6 80%,#d9446e 80%);line-height:20px;width:26px;">&nbsp;</div>

<!--finseuxal | minseuxal | linsexual-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#ff59a8,#ff59a8 14.3%,#feafc9 14.3%,#feafc9 28.6%,#ffcfb9 28.6%,#ffcfb9 42.9%,#ff59a8 42.9%,#ff59a8 57.2%,#ffcfb9 57.2%,#ffcfb9 71.5%,#feafc9 71.5%,#feafc9 85.8%,#ff59a8 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#00a4e7,#00a4e7 14.3%,#9ad9eb 14.3%,#9ad9eb 28.6%,#84ffaa 28.6%,#84ffaa 42.9%,#00a4e7 42.9%,#00a4e7 57.2%,#84ffaa 57.2%,#84ffaa 71.5%,#9ad9eb 71.5%,#9ad9eb 85.8%,#00a4e7 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<!--og polyamorous | green & blue polyamorous | tiktok colored polyamorous | ambiamorous-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#0000ff,#0000ff 33.3%,#fe0100 33.3%,#fe0100 66.6%,#000 66.6%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#94c83d,#94c83d 25%,#09743b 25%,#09743b 50%,#4cbfee 50%,#4cbfee 75%,#28246c 75%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#00c2ff,#00c2ff 40%,#ff006a 40%,#ff006a 60%,#0a1027 60%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#4848c2,#4848c2 20%,#404082 20%,#404082 30%,#313146 30%,#313146 40%,#1e1e1e 40%,#1e1e1e 60%,#453232 60%,#453232 70%,#7e4443 70%,#7e4443 80%,#c14a4a 80%);line-height:50px;width:70px;">&nbsp;</div>

<!--queerplatonic 1 | queerplatonic 2-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#fff87d,#fff87d 20%,#ffaede 20%,#ffaede 40%,#fff 40%,#fff 60%,#7f7f7f 60%,#7f7f7f 80%,#0f0f0f 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#ff90ca,#ff90ca 14.3%,#2a2a2a 14.3%,#2a2a2a 28.6%,#7f7f7f 28.6%,#7f7f7f 42.9%,#fff 42.9%,#fff 57.2%,#7f7f7f 57.2%,#7f7f7f 71.5%,#2a2a2a 71.5%,#2a2a2a 85.8%,#ff90ca 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<!--2013 intersex | 2009 intersex (with blur) | 2009 intersex (without blur)-->
<div class="rounded d-inline-block" style="background:#ffd900;line-height:20px;width:26px;"><div style="margin:auto;height:100%;width:76.95%;"><div class="d-inline-block" style="background:#7a00ab;clip-path:circle(30%);width:100%;"><div class="d-inline-block" style="background:#ffd900;clip-path:circle(20%);width:100%;">&nbsp;</div></div></div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#d9abcf,#d9abcf 16.7%,#fff 16.7%,#fff 33.4%,#a0cdee 33.3%,#a0cdee,#f0b7d7,#f0b7d7 66.8%,#fff 66.8%,#fff 83.5%,#d9abcf 83.5%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#d9abcf,#d9abcf 16.7%,#fff 16.7%,#fff 33.4%,#a0cdee 33.3%,#a0cdee 50.1%,#f0b7d7 50.1%,#f0b7d7 66.8%,#fff 66.8%,#fff 83.5%,#d9abcf 83.5%);line-height:20px;width:26px;">&nbsp;</div>

<!--altersex (with triangle) | altersex (without triangle) | aldernic (with lozenge) | aldernic (without lozenge) | salmacian 1 | salmacian redesign-->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#96ffba,#96ffba 20%,#93dcff 20%,#93dcff 40%,#fff 40%,#fff 60%,#cc93fe 60%,#cc93fe 80%,#ffa8be 80%);line-height:20px;width:26px;"><div class="d-inline-block" style="background:#fff;clip-path:polygon(50% 0%,20% 60%,80% 60%);width:100%;">&nbsp;</div>/div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#96ffba,#96ffba 20%,#93dcff 20%,#93dcff 40%,#fff 40%,#fff 60%,#cc93fe 60%,#cc93fe 80%,#ffa8be 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#5d59a3,#5d59a3 14.3%,#80dae3 14.3%,#80dae3 28.6%,#adf7d6 28.6%,#adf7d6 42.9%,#fffdd8 42.9%,#fffdd8 57.2%,#fbc5d2 57.2%,#fbc5d2 71.5%,#d07fe5 71.5%,#d07fe5 85.8%,#5d59a3 85.8%);line-height:20px;width:26px;"><div class="d-inline-block" style="background:#000;clip-path:polygon(50% 18%,70% 50%,50% 82%,30% 50%);width:100%;"><div class="d-inline-block" style="background:#fff;clip-path:polygon(50% 20%,68% 50%,50% 80%,32% 50%);width:100%;">&nbsp;</div></div></div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#5d59a3,#5d59a3 14.3%,#80dae3 14.3%,#80dae3 28.6%,#adf7d6 28.6%,#adf7d6 42.9%,#fffdd8 42.9%,#fffdd8 57.2%,#fbc5d2 57.2%,#fbc5d2 71.5%,#d07fe5 71.5%,#d07fe5 85.8%,#5d59a3 85.8%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background-image:linear-gradient(#3175fd,#3175fd 20%,#7ba6ff 20%,#7ba6ff 40%,#7b11c6 40%,#7b11c6 60%,#498d5e 60%,#498d5e 80%,#235e34 80%);line-height:20px;width:26px;">&nbsp;</div>

<div class="rounded d-inline-block" style="background:#4f7942;line-height:20px;width:26px;"><div style="background:#ffe680;clip-path:polygon(35% 0,90% 0,65% 100%,10% 100%);"><div style="background:#7644b6;clip-path:polygon(43% 0, 82% 0, 57% 100%, 18% 100%);"><div style="background:url(https://i.imgur.com/ZZk8A0l.png) no-repeat center;background-size:30%;">&nbsp;</div></div></div></div>