How to use Unicons?

Unicons contains 1100+ scalable vector SVG icons in multiple styles. We're working hard to make Unicons available for many frameworks and libraries for developers, and multiple file types for designers. Currently, Unicons are available as Icon Font CSS, SVGs, Downloadable Fonts, and components for React, React Native and VueJS.

How to use?



Using as CSS
Using as an SVG
Use as Fonts for Designers
Use with React/React Native/VueJS
Use with npm

1. Use as CSS



It's easy to use Unicons on your website by just inserting following code inside the head section of your HTML page.

<link rel="stylesheet" href="https://unicons.iconscout.com/release-pro/v4.0.0/css/solid.css">


Using icons in HTML

You can head over to our Unicons Explore page and copy the HTML code from right side.
For example, for facebook icon, you'll need to add below code in your HTML.

<i class="uil uil-facebook"></i>


2. Using as SVG



If you're a designer then it's always great to have SVG files. You can download SVGs from Official Unicons Website or download Icondrop to access these icons right into Sketch, Adobe Xd, Adobe Illustrator, and many more.

3. Use as Fonts for Designers



Unicons as also available as ttf font file format. Which you can download from our Getting Started page, below More Ways to use Unicons, click Font. You will need to install unicons.ttf to your Fonts folder.

Once installled, you can go to your favourite design tool, such as Figma, Illustrator and select unicons as a font.



Also, to help you, we've added a copy feature on Explore page. You click on the icon in Right Panel title and copy it directly.



4. Use with React/React Native/VueJS



We've created components for popular libraries like React, VueJS, React Native. You can head over to official GitHub Repo to know more.

Line Style
- For React: https://github.com/Iconscout/react-unicons
- For VueJS: https://github.com/Iconscout/vue-unicons
- For React Native: https://github.com/Iconscout/react-native-unicons

Solid Style
- For React: https://github.com/Iconscout/react-unicons-solid
- For VueJS: https://github.com/Iconscout/vue-unicons-solid

Monochrome Style
- For React: https://github.com/Iconscout/react-unicons-monochrome

You can easily install Unicons using npm. Just install the packages and you are good to go.

If you have Unicons PRO plan then you can mail us to get your NPM token. And you can add the below lines in your .npmrc to access all Unicons PRO packages.
@iconscout:registry=https://npm-proxy.fury.io/iconscout/
//npm-proxy.fury.io/iconscout/:_authToken={YOUR_UNICONS_NPM_TOKEN}


5. Using as npm package



You can easily install Unicons using npm.

npm install --save @iconscout/unicons


You'll be able to access vector SVG files inside node_modules/@iconscout/unicons/svg/line/facebook.svg

License



Unicons Line Style icons are licensed under Apache 2.0. You're free to use these icons in your personal and commercial project. We would love to see the attribution in your app's about screen, but it's not mandatory.

Unicons by <a href="https://iconscout.com/unicons">Iconscout</a>


Feedback & Suggestions



We will be happy to have community support for Unicons. We've created a thread at Iconscout Community where you can request for new icons. And we'll be happy to design them in few weeks.

Updated on: 05/09/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!