HTML Pride Flags

VynxCodes

Info


Created
4 years, 7 days ago
Creator
VynxCodes
Favorites
8388

Profile


Info

Notes:
  • The flag codes are on GitHub, triple click on the code's line to select your desired flag
  • May or may not get to flag requests or questions
  • Credit is not required, but if asked please do link back here

Flags

 
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 

 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
 
 

 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 

 
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 

 
 
 
 
 

 
 

 
 
 

 
 
 
 
 
 

 

Adding a Tooltip

 
Add data-toggle="tooltip" title="TextHere" after <div , ensure that there is a space surrounding both sides of each. Replace the TextHere in title with your desired text. You can add cursor:help; to the style to make the mouse cursor have a "?" beside it when the flag is hovered on.

Changing Size

 
 
Change the number in line-height:50px; to change the height and/or change the number in width:50px; to change the width.

Centering

This flag is
 
centered inline with the text.
Enclose the flag with a <div> or add class="d-block" to an enclosing tag make it display as a block and add  text-center to the class to get it to center (which will display inline with your text). Example: <div class="text-center">Text to the left INSERTFLAGHERE text to the right</div>

Changing Roundedness

 
 
 
Remove rounded from the class to remove the rounded edges. Add border-radius:100px; to the style and change the number & units [px|%|rem] as desired to change how round you want it.

As a Border

Flags with shapes will not work with their shapes, but you can still use their stripes.
Border
Border
Border
Copy & paste this code where you want to use it: <div class="p-2" style="border:10px solid;border-image:linear-gradient(AddHere) 10;width:100px;">Inside the Border</div>
Replace "AddHere" with the list of hex codes & percents (e.g. #fff42c,#fff42c 25%,#fff 25%,#fff 50%,#9d59d2 50%,#9d59d2 75%,#000 75%) of the desired pride flag.

HTML Pride Flags


  • Free to use
  • OK to edit/change/frankenstein
  • Mobile-Friendly
  • Non-Premium
  • Credit not required

HTML Pride Flags for whatever use you see fit! These pride flags are almost purely HTML (with the exception of some that have images) and their size can be changed however desired and fit alongside text due to them displaying as inline-block. Please see the GitHub for the most current flag codes; triple click to select the entire line instead of dragging your cursor to select.