All in one icon library Iconify icons (100,000+ free icons) Free. Includes Fontawesome, Google Icons, Boxicons and 100+ libraries. One Script file only.

What is iconify

Best all in one icons library to use in your project that is iconify is the library where you can find 100,000+ free icons and vector icons. iconify is free and opensource library. iconify includes fontawesome, google material, boxicons, carbon, flaticons, 100+ sets of icons. It is so easy to use in your project.

There are many excellent icon sets available. Each icon set has its own custom syntax, some are available only as fonts. Unfortunately, almost all of them load an entire set, even if you are displaying just a few icons. This makes it hard to use different icon sets.

Iconify tries to unify all icon sets. You can use the same code no matter what icon set you choose. You can mix icons from multiple icon sets on the same page.

"All icon sets listed above are open source."

Best icons to use:

Animated icons: animated icons
Two tune color icons: two color icons
Outline icons: outlined icons
Solid Icons : solid icons
Bold icons : bold icons
SVG logos: logos like google, facebook, etc.
Vector icons: vector icons
Imojis: emojis
Simple icons: simple icons

These are the best icons in iconify and much more sets of icons you can use from it.

Which language and Framework Does Iconify Supports:

Html : easily add icons in your html file
CSS import url: import icons from url in your css file
ReactJs: install iconify library and add icon component in your react js project
VueJs: easy to add icons in VueJs install package and add icon component.
Svelte : same as reactjs
Ember: same as reactjs
SVG : add SVG tag in your project without any adding or installing package.
SVG frame work: use as link to import svg file from iconify

How to use iconify in your project

HTML: You can add a one script tag link which is provided by iconify library. you can paste your script tag in your <head> tag as well as end of <body> tag thats all you can search for icons in iconify site and then get span tag code from the selected icon.

Example of Script tag link:

Example of Icon:

CSS: You can add directly import url which you will get from iconify site under Icon > CSS copy the url from it and paste in your background or content.

Example of url():

content: url('https://api.iconify.design/clarity/home-solid.svg');

Example of background:

background: url('https://api.iconify.design/clarity/home-solid.svg') no-repeat center center / contain;

ReactJs: You can install @iconify/react from NPM or YARN in your reactjs project. And then search your icon and copy icon component from iconify site. then import Icon component from @iconify/react which is installed in your react js project. Paste the icon component at your desired placed. Your icon is set.

Example:

Installing @iconify/react from NPM:

     $ npm install @iconify/react

Installing @iconify/react from YARN:

     $ yarn add @iconify/react

if you don't now about these packages you can google to understand package manager and how to use it to install packages in your projects

import React from "react"
import { Icon } from "@iconify/react"

const App = () => {
  return (
    <//div//>
      <// icon icon="clarity:home-solid" //>   
    <//div //>  
  );
};

export default App;

If you want use any other methods to insert icon you can go to simple documentation of this library here. it is simple to read and understand so you can try out.

Conclusion:

Iconify is best to use in developement. and it is easy and fast to use and free and open source library you can use icons freely in your project. try searching your desired icons and get 100+ icons. I have used it in many projects without any issues and any problem. so use it and enjoy thank you.

Written By:

Awesh Choudhary (Author DecodedJs)

3 Comments

AnonymousJune 1, 2022 at 5:52 PM
Thank you for your turorial this help a lot.
AnonymousJune 1, 2022 at 5:54 PM
Great i try this library and it is very useful thank you
AnonymousJune 1, 2022 at 5:56 PM
I have to find icons multiple sites and import it one by one. Thank god i found this. This save my time. It easy to use. All icons in one place

All in one icon library Iconify icons (100,000+ icons) Free. Includes Fontawesome, Google Icons, Boxicons and 100+ libraries. One Script file only.