Previously, icons and symbols on the web were presented as images; though they were compatible across browsers, they mandated designing, optimizing and cropping before the user could load and implement them. This meant that whenever the website branding changed, those tiny images had to be recreated all over again. web Icon fonts on the other hand, offer a new way of utilizing iconography with the same compatibility but much better flexibility. Fonts are basically a set of symbols, and include the benefits offered by CSS font properties.
Icon fonts are eye-catching, and help you create visually appealing websites with their many and varied features.
Open source web fonts allow designers to bring bold new innovation in their typography as well as page design. Here are some of the best free web icon fonts available:
Table of Contents
Created by designer Mario del Valle, the Captain Icon pack is hosted on Github. It has over 350 vector icons, with each icon featuring a unique design, all hand-drawn from the ground up. It is this fact that makes this pack stand out from the plethora of icon sets we see today. However, it may be more suitable for creative sites than others; as the icons are hand-drawn, they may not be ideal for say healthcare or financial services site.
Dripicons is a set of 90 flat-style beautiful vector icon fonts; it is great for websites and apps that require media, documentation, arrow, chart, and so on.
This icon font set complements many different types of fonts especially the best google web fonts, iOS or AS X apps. Though there are numerous paid sets, there is also a free Glyphicons set. This set includes 610 basic fonts and 60 social fonts. The free Glyphicons fonts are released under the Creative Commons Attribution 3.0 Un-ported license.
Looking for a uncomplicated, lightweight icon font? Octicons is your solution! Octicons is the in-house pack developed by GitHub. The latest version is 5.0, and has tons of icons with a few basic symbols. You can find them strewn across the GitHub website. They are very user friendly and you can use them on almost any interface.
The Sosa web icon font is a tailored icon font that is free for personal and commercial use; it offers over 160 icon fonts now. User interface, devices, media, weather, tools, currency, web, ecommerce, social, controls and so on are the categories you can find with this icon set. There are no restrictions on how you can use Sosa fonts, just that you cannot offer it as a free download on third-party domains.
The Typicons icon set works well for a whole range of sites. It has over 330 unique icons in somewhat similar style – simple outlines and smoothed corners. This free pack is available on GitHub, allowing you to deploy the icons on your site directly, and make whatever alterations you deem necessary. Typicons is not as well known as some of the other icon sets but it’s a good set of fonts. With just a few adjustments and adding bits of code, you can even use them for iOS.
Zondicons are free and super easy to add to your site; however, they don’t feature an update archive as they are not hosted on GitHub. However, there is a demo page which displays al the examples, like which CSS classes you will require to ensure that they work effectively. The main link for downloading Zondicons is straight from the website, making it tough to check of any new icons were recently added, or any existing ones were updated. Yet, if your website design isn’t too complicated, you can use this icon set; they are easy to use and blend very naturally into your site with a generic style.
The Elegant Icon web font is a free set that has over 360 icons, with 50 of them specifically for business. The icon style is graceful and dazzling, and creative people will love to use them. These vector based graphics can contract or expand without diminishing the quality, resulting in crystal clear, beautiful icons on various types of display – even retina display.
The Entypo web icon set is not new, but these 400 + icons are excellent, and top-notch among the free ones. New icons are added intermittently, and you can access them easily. The fonts are available in two sets: the social media pack, and the main pack. So if you don’t require social media icons, you only need to take the main pack, and keep your font file size down. They are released under the Creative Commons share alike license.
MFG Labs have released their own web icon font set, absolutely free, and hosted on GitHub – which means easy access! It’s fairly new, and is packed with the usual web font formats, created with Unicode PUAs in CSS. As it is completely semantic across browsers, it helps to minimize conflicts with other CSS code. The distinctive style of MFG Labs icons makes it a class apart; they are good to use with any kind of website – personal, brochure, ecommerce, or any other.
The Ionic Framework is hugely popular with native app developers, especially when it comes to web to mobile apps. Riding on this popularity and success, the Ionic Team created their own icon web font set, dubbing it Ionicons. Yes, they are 100% free, and hosted on GitHub, and capable of being added straight to your site when you use the stylesheet’s CDN version. If you’re a greenhorn who hasn’t worked with icons previously, this is perfect. Easy to configure, these icons can be your stepping stone to working with other more complicated web fonts.
It’s a favored choice of many designers as it’s one of the original web fonts and has been around for ages. It’s acknowledged as the first key open source icon font, and is regularly updated with innovative icons. Freely downloadable on GitHub, the current version is not 4.7. it has some great benefits, like its capability of being maintained directly in CSS, and being completely scalable. It is also highly customizable, allowing you to play around with background gradients, shadows and colors, and anything else you want to change, with the help of pure CSS3. It’s a mature and reliable icon sets – you know that it’s not going to disappear from the scene anytime soon.
IcoMoon provides two free icon font sets that look amazing with serif and sans serif fonts. 490 rounded icon fonts in solid colors make up the first set; the second set has a different name – Linearicons. It contains about 170 fonts that are line based, and is distributed under the Creative Commons Attributions Sharealike license.
Are you searching for an icon font that is uncomplicated, yet attracts and amazes? Well, your search ends with Fontello. It offers over 1000 icon fonts that are retina ready. They are available on GitHub, making access super easy. Fontello generates an archive with docs, fonts and CSS files.
One of the most famous and popular icon font sets, Iconshock has more than 110,000 unique icons, offered in sets of 300. The different sets typically include business, graphics, accounting, multimedia, web design, networking, database and so on.
If you want to create a stunning and dynamic map, Map Icon will do the trick for you. It offers over 700 scalable vector graphics icons which you can use to mark location, navigation and a whole lot more, on your maps. It’s great for Google Maps API and Google Places API, and makes the map markers of Google dynamic, offering control over shape, size, color and icon, either through marker object options or through CSS and SVG notations.
The material design from tech giant Google, radicalized the UI/UX approach on the web, leading to the creation of several new resources and frameworks. One of them happens to be the material design icon font, which is completely free, and is hosted on GitHub for easy access. As you can expect with Google, this is a humongous pack, offering more than one thousand icons that include a vast assortment of interface features. Not only can you use them freely on whatever project you’re working on, you also have the freedom to customize these icons. If you’re working with Google material guidelines on the web, there can be nothing better.
283 different fonts to choose from: that’s what the current version of Foundation’s icon fonts (V 3) offers you. As the fonts are rounded, they go well with the different serif fonts. Sure, you can use the previous versions of the fonts; however, if it’s consistency you’re looking for, then we recommend you use the latest version.
One of the newer web font sets available, Devicons are great for branding purposes and tech logos. The set features every kind of logo you can think of, from the big players to newer CMS logos. They are perfect if you are building a site that requires vector tech logos. This set is massive, and totally free.
Unicons Library is another set of creative icons featuring minimal and simple designs developed by Iconscout. There are about 4500+ icons available in Line, Solid, Thinline, and Monochrome style. By clicking on the Color change button you can select the color or you can also add your brand HEX code. It will show all the icons in your brand color. These icons can be used as Icon fonts as well. All you need to do is add one simple line of code and you can easily access it. This makes it very simple to collaborate between designers and developers. If you’re looking for icons that are perfect for any project, personal or commercial, you should definitely check out the unicons from Iconscout.
As the name suggests, Socialio is a set of 74 social media icons which are best suited for social purposes; however, you can build the whole site with these amazingly striking icons.
There is an embarrassment of riches when it comes to web icon font sets, even the free ones, that are available for use; just examine a few designs to determine which will suit the needs of your project the best.
Acodez IT Solutions is a web design company in India offering all kinds of web design solutions ranging from carousel sites to the ultra modern sites that only a few of the multi giants have got. We are also a SEO agency based in India offering all kinds of SEO and inbound marketing solutions to our clients. For more details, you can visit our website or contact us.
Contact us and we'll give you a preliminary free consultation
on the web & mobile strategy that'd suit your needs best.
WHAT IS AN API? (APPLICATION PROGRAMMING INTERFACE)Posted on Nov 04, 2022 | Web Design
What Is a Framework in Programming & Why is it Ideal to Use One?Posted on Oct 25, 2022 | Web Design