iconscout / unicons Goto Github PK

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

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).

https://npmjs.com/advisories/1594

please update dependency

Hi, just small spell fix issue

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

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

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

Please update also npm repo

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

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

Icon: graduation-cap

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

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.

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?

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.

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

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?

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:

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

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!

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 had a double line on bottom right

Please add a brand icon for Jira.

Thanks.

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

Please add bike and motorbike icon into sports category.

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 :)

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

please check it.

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.

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

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?

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

Please update also npm repo

Please add a brand icon for Zendesk.

Thanks.

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.

==== 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

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.

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

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>

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

s/comming/coming

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

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

(source)

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).

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 !

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

Thank you!

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

Should be UilCalendar (with an A not an E)

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

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

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

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