Looking for programming icons? These libraries could be useful
If you are looking to showcase your technology skills on a website(like me) and don’t want to download and store individual images of each programming language, designing and development tool then these libraries of programming icons are for you.
Common advantages offered by these libraries
- Centralized – All useful programming icons are available from one CSS library.
- Light weight – The are font based and not heavy on network.
- Scalable – Built using SVG, so it will look awesome at size(You can try scaling up/down).
- Customizable – You can use it along with any library and easily customize color, size or anything that is possible with CSS.
- Free – Who doesn’t like this? 🙂
Here are the options
Devicon
Contains 78 icons(at the time of writing this post) with 200+ versions (font/svg, original/plain/line, colored/not colored, wordmark/no wordmark)
Here is a pen I created with this library
See the Pen wqEYZm by Vikram Kumar (@kumarvikram) on CodePen.dark
There are two ways you can leverage this library in your web application
SVG icons – Directly copy/paste the SVG code.
Font icons – Reference the devicon.css in your project.(I have used this method in the pen above)
You can also install this package as a npm dependency.
Devicons
Devicons contains 85 vectorized sharp glyphs. There are no default customization available like Devicon but you are always free to apply any styling using CSS.
Another pen with this library
See the Pen wqEQJY by Vikram Kumar (@kumarvikram) on CodePen.dark
Website
GitHub Repository
Font Mfizz
This library contains 98 icons that includes programming languages, operating systems, and technologies.
See the Pen brxQoO by Vikram Kumar (@kumarvikram) on CodePen.dark
Website
GitHub Repository
All these libraries offer similar features and set of icons but there are some differences I noticed, e.g., there is no icon for C# in Devicons and .net is missing from Font Mfizz.
Devicon is my favorite because of two factors
- Complete – It has all the icons that I needed.
- Color options – It saved me from writing custom CSS style applicable for each icon. I don’t need to know the color code for AWS or Twitter or Angular JS, the library takes care of it
Try yourself and feel the difference. Do not forget to ask if you have any questions in the comments and share it.
Did you check my knowledge grid I built using this? It is on the home page.
