iconscout / unicons

Unicons by IconScout offers 7,000+ free 3D and animated icons plus icon fonts in line, monochrome, solid and thin line styles. Use them in your web, iOS or Android design projects.

Unicons

1000+ Pixel-perfect vector icons and Iconfont for your next project. These icons are designed by IconScout.

Getting Started

Using as a font

It's easy to use Unicons on your website by just inserting following css. You can also download this repo and use the css from css folder.

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

And use the icons in your body as below.

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

Using as npm package

You can easily install Unicons using npm.

npm install --save @iconscout/unicons

Using as an 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.

Using in Flutter Framework

There's a Flutter package created by Pedro Lemos, avaliable in pub.dev, which can be easily used in your project.

Just add the dependency in your pubspec.yaml file as following:

dependencies:
  unicons: ^1.0.0+2

Then, run the command above:

flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now, in your Dart code, import the package:

import 'package:unicons/unicons.dart';

Use with JS Frameworks

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

More ways (Community supported)

• Vue-unicons by Anton Reshetov

Roadmap

• Make React Components
• Adding Brand Icons
• Designing Solid Style
• Designing Thin-line Style
• Support for CSS Animations
• Make SVG Sprite in which user can control different attributes such as stroke, fill, width, height and more.

Contributing

We will be happy to have community support for Unicons. Feel free to fork and create pull requests. We have given a small roadmap above so that you can help us build these features.

Icon Requests

We've created a thread at IconScout Community where you can request for new icons. And we'll be happy to design them in upcoming weeks.

License

Unicons are Open Source icons and licensed under IconScout Simple License. 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/">IconScout</a>

unicons's Issues

not working

when i am use as font in html and add " i " it is not showing in my website.

please check it.

OTS parsing error

Hi,

I'm using uicons with jsdelivr. Lately, I'm getting the following errors
dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/[email protected]/fonts/line/unicons-6.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: 1936028172 dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/[email protected]/fonts/line/unicons-9.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: 4008750 dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/[email protected]/fonts/line/unicons-3.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: -369077877 dashboard:1 Failed to decode downloaded font: https://cdn.jsdelivr.net/npm/@iconscout/[email protected]/fonts/line/unicons-11.woff2 dashboard:1 OTS parsing error: invalid sfntVersion: 1110126000

Please advise.

Cheers

As NPM package

Since there are libraries that now depend on unicons, it is good to be able to install unicons via NPM instead of direct downloading from github - github:iconscout/unicons#master.
It will also be possible to specify the required version.

Issues with "graduation-cap" icon

Icon: graduation-cap

Top and bottom of the cap is not rounded, has unsmooth edge.

Icons not loading

Hi,

Icons from unicons are not loading.
On chrome and firefox everything load correctly except renders, and with edge, nothing shows up.

Please take a look :
https://iconscout.com/unicons/explore/line

Thx !

Add group tag to enable the svg <use> tag

Currently it's not possible to dynamically import the icons and color them with the current text color. Simply adding a group tag with an id and fill='currentColor' attribute would enable this. For example:

<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><g id="abacus" fill="currentColor"><path d="M21,2a1,1,0,0,0-1,1V6H16V5a1,1,0,0,0-2,0V6H12V5a1,1,0,0,0-2,0V6H8V5A1,1,0,0,0,6,5V6H4V3A1,1,0,0,0,2,3V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V3A1,1,0,0,0,21,2ZM20,19a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V16H6v1a1,1,0,0,0,2,0V16h2v1a1,1,0,0,0,2,0V16h4v1a1,1,0,0,0,2,0V16h2Zm0-5H18V13a1,1,0,0,0-2,0v1H12V13a1,1,0,0,0-2,0v1H8V13a1,1,0,0,0-2,0v1H4V8H6V9A1,1,0,0,0,8,9V8h2V9a1,1,0,0,0,2,0V8h2V9a1,1,0,0,0,2,0V8h4Z"/></g></svg>

Fonts folder missing in v3.0.4

CSS icons not loading in v3.0.4 because fonts folder and contains missing. But v3.0.0 working properly. I think forgotten.

I am using NPM.

Icon padding

Hi there,

Loving the icons! I'm just about to finish replacing Font Awesome with Unicions.

However, one thing I am noticing, is that the icons can look a bit weedy in comparison to FA, because each of the icons has built-in padding:

This is accentuated by the fact the lines can look a little slim, so sometimes a particular Unicon icon at 16px will look distinctly smaller than an equivalent Font Awesome icon at 16px.

I've been experimenting with workarounds like font-size: 1.2em; margin: -.1em) but do you have any advice to counteract this?

Thanks,
Dave

Display problem

Hey Guys, I have problem with display Icons. I use your css link in my prototype but there are some error. For example in project I use calendar icon but browser display brightness-plus icon. Any ideas how to fix it?

Cannot use Unicons with font hosted locally

Hi,
I want to use Unicons font locally on my machine, with the dedicated line.css file (taken from https://unicons.iconscout.com/release/v3.0.0/css/line.css) to use them in my website. I installed the font from here (https://github.com/Iconscout/unicons/releases/download/v3.0.0/fonts.zip), unpacked the zip, modified the line.css file to adapt it to fonts hosted locally, but the problem now is that some icons work bad, and some a lot not at all.

Here my modifier version of line.css:

@font-face {
  font-family: Unicons;
  src: url(../../fonts/unicons/unicons.woff2) format("woff2"), url(../../fonts/unicons/unicons.woff) format("woff"), url(../../fonts/unicons/unicons.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block
}

[class*=" uil-"]::before, [class^=uil-]::before {
  font-family: Unicons;
  font-style: normal;
  font-weight: 400;
  display: inline-block;
  text-decoration: inherit;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}


/* before, animations are here */

@tarunmangukiya maybe can you help me?

Thank you and have all a good day

SVG images not aligned?

Hi,

It seems that the SVG images are not positioned consistently within the canvas

It looks like the content is centered, without considering variants of the same icon (in the example above: image-plus and image-minus).

Is there any way this can be fixed?

Update SVGO dependency

Hi !
Is it possible to update SVGO to 2.0.0 or above to avoid a warning with a high severity when running "npm audit fix" =>

nth-check  <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/svgo/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/svgo/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/svgo

Link to advise

I try to fix it in my fork of this repo but I struggle to build the font. It looks like I miss some secrets...
Without these secrets, I can't go further to update SVGO calls.

Thanks for you help

Document changed icons

After upgrading I noticed that some icon names have changed, e.g. code and location. Please document changed names in the release notes.

Icon request: Translation

It would be nice to have an icon that means "translate", "translation" or "language" such as:

axios vulnerability

https://npmjs.com/advisories/1594

please update dependency

arrow.svg not included in npm

Following path does not exist:
@iconscout/unicons/svg/arrow.svg

Combining Icon files

How can I combine all the separate font files into one bundle ?

Icon name consistency

There are two icons with the same name but with different spelling snow-flake and snowflake

Source files / stroke version ?

Hi, first of all I would like to congratulate you for this amazing icon set, I can find an icon for pretty much anything!

My queston is if there any source file with strokes?
I would like to have these files so I can change the stroke width when needed.

Again, thanks for these icons!

Icon request: Caret down and up

Can you please add these icons? They are specially useful as select icons, instead of using chevrons.

I tried to upload the SVGs, but Github didn't accept. I used for the size 12px width by 6px height with 1px corner radius (24x24 frame).

UilCalender is misspelled

Should be UilCalendar (with an A not an E)

Icon request: dropper

(source)

Not exist several .svg files

In icon.json

{
    "id": 1237463,
    "name": "ear",
    "svg": "svg/ear.svg",
    "category": "Medical",
    "style": "Line",
    "tags": [
      "body-part",
      "body-organ",
      "organ",
      "ear"
    ]
 },
{
    "id": 1239442,
    "name": "snapchat-ghost",
    "svg": "svg/snapchat-ghost.svg",
    "category": "Brand Logos",
    "style": "Line",
    "tags": [
      "logo",
      "social-media",
      "brand",
      "snapchat",
      "snapchat-ghost"
    ]
  },
  {
    "id": 1239444,
    "name": "snapchat-square",
    "svg": "svg/snapchat-square.svg",
    "category": "Brand Logos",
    "style": "Line",
    "tags": [
      "logo",
      "social-media",
      "brand",
      "snapchat",
      "snapchat-square"
    ]
  },

but the file ear.svg, snapchat-ghost.svg, snapchat-square.svg not exist

Clock icon not center aligned

Some of the clock icons are not center-aligned horizontally.

AccessDenied While Using The https://unicons.iconscout.com/release/v3.0.1/css/unicons.css

I am unable to add to my Project using below link getting Acces denied

https://unicons.iconscout.com/release/v3.0.1/css/unicons.css.

Please fix it or give the css to workaround.

Icon Request: Jira

Please add a brand icon for Jira.

Thanks.

Icon request: Pinterest

Thank you!

Icon Request: Zendesk

Please add a brand icon for Zendesk.

Thanks.

Please use debounce for search input in https://iconscout.com/unicons

I'm not sure where is the site in the title maintained, but as the title says, there should be a debounce on the search input.
Typing in the input feels very sluggish on mobile (and for some searches - on desktop as well).

typo on website

s/comming/coming

Licence ?

Hey!

This is a pretty neat work :)

What is the licence for those icons?
I believe that the repo needs some Licence.md so people can know how they can use it.

Thanks!

file-network is malformed

Icon had a double line on bottom right

SVG sprite?

Have you guys considered providing a SVG sprite (no font)?
Thanks for the amazing set.

Update NPM to latest version

Please update also npm repo

Monochrome svgs are solid black

All of the svgs in the monochrome directory are solid black. Is that intentional? Is there some way to generate the monochrome svgs variants without using a React component?

angular components

Any future plans on creating angular components for the icons like what you have now for vue and react? :D

Line break in path in chart-pie-alt.svg

For rendering SVG in browser doesn't matter, but for my lib for Vue https://github.com/antonreshetov/vue-unicons I parse SVG path and store it in vars, and on this icon there is a problem

Critical NPM vulnerability

Command Injection in fontello-cli dependency
https://npmjs.com/advisories/663

Margin Issue for Line Icons CSS

As per #81, we'll need to change our styling to make the UI pixel perfect. The proposed solution for it can be like below:

.uil {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: unicons;
    font-style: normal;
    font-weight: 400;
    speak: none;
}

And remove extra ::before css for psuedo-class.

Vulnerability: Inefficient Regular Expression Complexity in nth-check

I found this Vulnerability that was coming from one of unicons dependency -> nth-check.
here is the snapshot of GitHub report ->

JSON file with icons name and its hexa/unicode

Just like FontAwesome, it would be very helpful to have a json containing all icon's unicodes.

E.g. based on json file you already have on GitHub:

{
    "id": 1213915,
    "name": "comment-alt-question",
    "svg": "svg/line/comment-alt-question.svg",
    "category": "Chat",
    "style": "Line",
    "tags": [
        "question-mark-chat-bubble",
        "chat",
        "chat-bubble",
        "help-chat",
        "support-chat",
        "comment-alt-question"
    ],
    "unicode": "f26e"
}

Thanks :)

[Question] how to get fonts for local installation

Hi,

I need to have the font hosted on the server and cannot use external link for security reason.

I have found the .ttf
And multiple .woff2 files (based on the online css file)
and multiple .svg

Where can I found the regrouped files for
.woff
.woff2
.eot
.svg

Or explain how to get it working locally without using any external files.

Thanks

Update webpack dependencies

Outdated webpack using vulnerable chokidar@2.

I believe this will not affect much on your source, but will immensely help those using this awesome package.

Minimal change.

$ npm install

Before fix:

After fix:

Update NPM to v1.0.0

Please update also npm repo

Add typescript typings for the icons

Its really a pain to use these icons without types in typescript, so it would be nice if you provide the typings

Icon request: Bike / Motorbike

Please add bike and motorbike icon into sports category.

Spell fix raddit-alien-alt

Hi, just small spell fix issue

raddit-alien-alt -> reddit-alien-alt

uil-home-alt does not exist in the json/line.json file

The uil-home-alt icon does not exist in the json file, while the actual icon is present in the following path:
svg/line/history-alt.svg
I wanted to look into it myself, but couldn't as I don't have access to the required environment variables that are used to fetch json and .svg files

Problem with events.

I am using vuew-unicons in vue 3.0, but I am rather new to it.

"dependencies": {
"core-js": "^3.19.0",
"vue": "^3.0.0",
"vue-unicons": "^3.2.2-alpha.1"
},

When I add an @click="MyHandler" I get 2 events per click.

Since it is a toggle for showing an edit form, It fails to show.
If I use @click.stop, @click.stop.prevent, @click.prevent or @click.prevent.stop I get an exception. (which comically makes it work.

I could not find an example of how to use the event listed in the documentation or a test of this.

i.e.

{{ wearer.wearer_name }}

{{ wearer.wearer_id }}

==== yields =====
[Vue warn]: Unhandled error during execution of component event handler
at <Unicon name="edit" fill="black" hover-fill="green" ... >
at <Wearer wearer=
Object { wearer_name: "Mike Miller", wearer_id: "78036bbd-d3a6-4999-969b-9da93f49f57b", active: true }
onToggleActive=fn onDeleteWearer=fn ... >
at <Wearers wearers=
Array(8) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]
onAddWearer=fn onUpdateWearer=fn ... >
at runtime-core.esm-bundler.js:6568
[Vue warn]: Unhandled error during execution of native event handler
at <Unicon name="edit" fill="black" hover-fill="green" ... >
at <Wearer wearer=
Object { wearer_name: "Mike Miller", wearer_id: "78036bbd-d3a6-4999-969b-9da93f49f57b", active: true }
onToggleActive=fn onDeleteWearer=fn ... >
at <Wearers wearers=
Array(8) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ]
onAddWearer=fn onUpdateWearer=fn ... >
at runtime-core.esm-bundler.js:6568
Uncaught TypeError: e is undefined
stop runtime-dom.esm-bundler.js:1426
withModifiers runtime-dom.esm-bundler.js:1445
callWithErrorHandling runtime-core.esm-bundler.js:6685
callWithAsyncErrorHandling runtime-core.esm-bundler.js:6694
emit$1 runtime-core.esm-bundler.js:269
1 vue-unicons.es.js:1
patchStopImmediatePropagation runtime-dom.esm-bundler.js:361
callWithErrorHandling runtime-core.esm-bundler.js:6685
callWithAsyncErrorHandling runtime-core.esm-bundler.js:6694
runtime-dom.esm-bundler.js:1426

WhatsApp icon

Apparently WhatsApp SVG is weird, it has some generated XML inside.