In need of badges for your project?
I’ve been in a continuous pursuit making sure I code daily! The goal is to add small features into my projects as I discover and learn more things in Software development!
While rebuilding my GitHub markdown, one of my recent discoveries are these badges you can use to show off your tech stack! I have been seeing it from other people’s profiles as well and I was inspired to put some on mines! Where best to test out and display these badges than your portfolio! So here’s how I personalized mines!
First up, here's where you look for the icons you wanted.
Simple Icons (They redesigned their website! They added a search function + night mode toggle!)
Reference Syntax:
<img src="https://img.shields.io/badge/-{BADGELABEL}-{COLOR/HEX}?logo={ICON-NAME}&logoColor={LOGO-COLOR}&style={STYLE}" alt="badge sample"/>
Things we will touch base with are the marked one right here:
BREAKDOWN:
Badge Label:
Not case-sensitive, but for spaces just add %20 in replacement. (Ex. Ruby%20on%20Rails)
In application:
https://img.shields.io/badge/-Ruby%20on%20Rails
Color/Hex:
Named colors do work with these badges as well as hex code colors just take out the ‘#’ (Ex. #bf00ff = bf00ff). This one is my fave because you can further customize your badges whether for a theme or just wanted more uniformity across your styling.
In application:
https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000
OR
https://img.shields.io/badge/-Ruby%20on%20Rails-red
Icon Name:
At this time, you should already know if the icons you need are available from Simple Icons. Majority of languages/brands/framework icons are there and is easy to find!
The page also provides the corresponding hex color code for the icon of your choosing. (Ex. ruby%20on%20rails)
In application:
https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000?logo=ruby%20on%20rails
Style :
For the look and shape of your badge! Multiple ways to choose from!
In application:
https://img.shields.io/badge/-Ruby%20on%20Rails-CC0000?logo=ruby%20on%20rails&logoColor=white&style=for-the-badge
| Name of style | Badge |
|———————————————|:—————————:|
|For-the-badge |
|
Flat |
|Flat-square |
|Plastic |
|Social |
Viola! That is basically it! Here’s how mine turned out!
There are a lot more options for badge styles and you can definitely mix and match them to make your portfolio bring more of your own style.
Here are more resources that you can use:
Aleen42’s Badges | Github repo
Syntax:
<img src="https://badges.aleen42.com/src/react.svg" alt="badge"/>
Which looks like something like this : 
Syntax:
<img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="html"/>
Which looks like something like this :
FontAwesome to React - You can definitely use FontAwesome icons to show your tech stack! in my case, I used these icons to show my 'social media stack' on my website.
Syntax:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faDev} from '@fortawesome/free-brands-svg-icons';
<FontAwesomeIcon focusable="true" icon={faDev} size="2x" color="#caf000;" className="icon"/>
And it came out like this!
Top comments (0)