docs / home / badges
📄 Badge Reference
Welcome to the badge reference! This place contains the pages to all the badge types and badges, shows how to use the badges, and some recommendations when putting badges in your page.
At the moment, this isn't really the best solution for a badge picker. I am aware :p
Also, you don't need to add credit - it would be nice for you to do so, but I really don't care if you do or not. I just make these for fun!
👍 Recommendations
While you don't have to do these, I recommend following these guidelines to make sure the badges look great on your page.
- Use HTML versions when possible
- Use SVG (
*_vector.svg) versions when possible - Keep badge sizes in the recommended heights (available on each type page, and here)
- Don't modify the badges unless needed
- Don't have the badges too close to other text
❓ Types
Cozy
This is the badge you will usually want to use. Recommended height is 48-64px. 56px is default for svg versions.
Compact
Compact badges are like cozy, except shorter in height. Recommended height is 32-46px. 40px is default for svg versions.
Cozy and Compact Minimal
Minimal badges are versions of these badges that have no text. It only displays the icon. Recommended heights are the same as their non-minimal counterparts.
