Here are 10 other open source icon libraries. All the libraries listed below are completely open source because I have checked the license terms and conditions.

Font Awesome

I’m sure most of us have used Font Awesome ICONS at least once, until now, because they were one of the first highly popular open source icon libraries released. As of now, there are 1,588 free ICONS and 7,842 professional ICONS in their gallery.

One of the main reasons Font Awesome is still widely used is probably because they offer so many different ICONS. Our site actually uses a two-tone icon called Font Awesome Pro, which we believe makes our site more distinctive than other similar sites.

Another interesting feature is that Font Awesome provides a personalized CDN link. If you create an account, you can generate a personalized CDN link. This way, you can conditionally exclude regular ICONS and use only two-tone ICONS.

Of course, you can choose to include only a few ICONS by directly copying and pasting the SVG code, which I recommend if you don’t use more than 20-30 ICONS on your site.

In short, there are many ways to use Font Awesome, such as copying the SVG source code for a single icon, downloading a library, or using a public or your own CDN. Their pages are great and can help you get started with Font Awesome.

  • Demo：fontawesome.com/
  • Github:github.com/FortAwesome…

Ionicons

Ionicons. IO is another open source icon library driven by SVG, with 457 individual ICONS in three different styles: outline, fill, and Sharp. I especially like the simplicity of silhouettes and shapes. I definitely recommend you try it out for your next project.

If you want to use Ionicons instead of just using stand-alone SVG, you can include the following script in the footer.

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
Copy the code

Then, simply add the following elements to the HTML template and change the name attribute to match the icon to be displayed, as shown below:

<ion-icon name="heart"></ion-icon>
Copy the code

You can read more about basic usage on their official website.

  • Demo：ionicons.com/
  • Github:github.com/ionic-team/…

CSS.gg

If you’re an active member of the Reddit developer community, you may have noticed that a new icon library has been released that uses only CSS for styling. Currently, it has 704 individual ICONS based on categories such as reminders, arrows, code, design, etc.

There was some debate over whether CSS or SVG was better for performance, but the creator of the library, @AstritMalsija, later released version 2 of the SVG, SVG Sprite, Figma, and Adobe XD formats to provide a broader implementation.

Getting started with css.gg is as easy as running the NPM -i css.gg command, and later include the following stylesheet in the head tag:

<link href='https://css.gg/css' rel='stylesheet'>
Copy the code

Of course, there are CDN alternatives, such as using UNPKG or JSDelivr, as follows:

<! -- UNPKG -->
<link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'>

<! -- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>
Copy the code

You can learn more about getting started with CSS.gg in the formal Getting Started Guide for the repository.

  • Demo: CSS. Gg /
  • Github:github.com/astrit/css….

Feathericons

Feathericons is another very nice and clean icon library containing 282 SVG ICONS. By default, it only uses SVG as the main format, but that’s ok because this is currently the recommended way to use the icon because it’s the fastest.

I like to configure the size, stroke width and color of the icon before downloading it. You can also switch between light and dark modes by clicking the moon icon in the upper right corner of the site.

Getting Feathericons started is as easy as downloading an SVG file and including it in a tag, using SRC or using it as an embedded SVG object.

  • Demo：feathericons.com/
  • Github:github.com/feathericon…

Eva Icons ❤ ️

Eva Icons is a set of 480 beautifully crafted open source Icons, which are provided in SVG and PNG formats. There are two main outline and fill styles, and what I like is that you can select the animations that zoom, pulse, or shake out of the box while hovering.

Getting started with Eva Icons is as simple as downloading an SVG or PNG file and choosing the icon to use or downloading the whole set of Icons. You can also include Eva Icons by installing the NPM package, as shown below:

npm i eva-icons
Copy the code
  • Demo: akveo. Making. IO/Eva – the ICONS
  • Github:github.com/akveo/eva-i…

Heroicon

Heroicons is another great open source icon library built by the creators of Tailwind CSS. It has over 165 individual ICONS with fill and outline styles, but dark and white versions of each element are also available. The look of the icon is very good and well made.

Getting started with these ICONS is as simple as clicking on one of them and copying the inline SVG code that you can use immediately in your project. I like that they also provide the library in Figma. If you want to include all the ICONS, you can download all the SVG files from the public repository.

  • Demo: heroicons. Dev /
  • Github:github.com/refactoring…

Bootstrap icons

A few weeks ago, I compared the new Bootstrap 5 icon to Font Awesome. Currently, it has over 600 custom ICONS driven by SVG, and I think it’s really good in terms of design. If you like using Bootstrap as a CSS framework, you should consider using the Bootstrap 5 icon for your next project.

Getting started with the Bootstrap 5 icon is as simple as copying SVG code, and then you can use it as you see fit, whether it’s inline, as source for images, or creating pseudo-code classes in CSS. Either way, their website clearly explains how to do it.

  • Demo：icons.getbootstrap.com/
  • Github：github.com/twbs/icons

Remix Icon

Remix Icon is a beautiful collection of 2149 open source ICONS under the Apache License. There are a variety of ICONS to choose from, such as business, communications, finance, maps and so on. It’s definitely worth seeing.

The Remix Icon is simple to use by downloading the SVG or PNG versions, or by copying the embedded SVG code directly onto the clipboard. Alternatively, you can choose to download the entire package as a single.svg file or SVG Sprite file.

  • Demo：remixicon.com/
  • Github:github.com/Remix-Desig…

Octicons

Octicons are a group of over 100 open source ICONS that Github also uses on its main site. Apparently, they are already working on the second version of the library by improving the design and types of ICONS.

One big advantage of Octicons is that you can also get them as a ready-to-use package in React, Ruby, Rails, Jekyll, and Javascript. Here are all the packages you can use to get started with Octicons.

  • Demo: primer. Style/octicons /
  • Github:github.com/primer/octi…

Ikonate

Last but not least, Ikonate is another awesome open source icon library with about 100 advanced ICONS based on graphic design. It is generously licensed under a very liberal MIT license.

Before exporting, you can easily configure the icon size, border width, borders and corners, and color. In the export ZIP file, you’ll get an HTML file with all the selected embedded ICONS, as well as a folder containing a separate SVG file and a Sprite image.

  • Demo：ikonate.com/
  • Github:github.com/mikolajdobr…

Finally, please give these libraries a Github star and let them know what a great job they are doing to support these libraries. If you haven’t decided on a specific icon library for your next project, consider sharing this list with your friends or colleagues.

Article first published in the public number “front-end Foreign language selection”, private message reply: gift package, send a network high-quality video course online disk data, can save a lot of money for you!