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.
Using as CSS
Using as an SVG
Use as Fonts for Designers
Use with React/React Native/VueJS
Use with npm
It's easy to use Unicons on your website by just inserting following code inside the head section of your HTML page.
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.
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.
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.
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.
You can easily install Unicons using npm.
You'll be able to access vector SVG files inside node_modules/@iconscout/unicons/svg/line/facebook.svg
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.
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.
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/uniconsYou'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
Thank you!