Hey there!

Is it or will it be possible to use pro packs (specifically Font Awesome)?
I've got a pro license so I would like to use all available icons.

Thanks!

I notice that the instructions indicate to install the package with npm install --save-dev but this seems counter-intuitive to me. Wouldn't the library be needed in production as well. Can you please confirm, and I'd recommend amending the docs either way just to avoid any confusion.

• https://github.com/modulz/radix-icons

This there any guide/example for how to contribute (make PRs) to adding new icon sets? Thanks.

Hi guys,

This is warning message:

Warning: Expected server HTML to contain a matching <span> in <div>

The problem same with @iconify/react

Demo code in https://gist.github.com/schlomo/fc4711655332cb30198bdf81a9863dc6

With Iconify.basic and preloaded icons it doesn't convert icons added later on.

The example illustrates this (run with npm start). The result you see is that the X in the web page are not converted to an icon.

Uncomment the Iconify.scanDOM() line in index.js to see that then the X are converted. With regular @Iconify/Iconify the Iconify.scanDOM() call is not necessary.

I'm using this example: https://docs.iconify.design/sources/bundles/examples/svg-framework-full.html

It works great, except that a file like thumbs-up.svg, when bundled, the custom icon will have a name of just "up".
Is there way to keep the full name, so I can use the icon like
<span class="iconify-inline" data-icon="custom:thumbs-up"></span> instead of just ..."custom:up"... ?

Hi, I just updated my load script to 1.0.5 and have noticed that inline styles are not working with the icons. If set on a parent tag the style works fine, also if set on a class using css the styles are fine too, but inline styles are definitely not working. I switched back to loading 1.0.4 and it's working fine.

For example using this line

<span class="iconify" data-icon="mdi:lock-outline" data-inline="false" style="font-size:170px;"></span>

Does not work using 1.0.5.

I'm loading the script for 1.0.5 from the cdn using :

<script src="https://code.iconify.design/1/1.0.5/iconify.min.js"></script>

As per the documentation. Have tested on a few different pages with the same results. Can someone confirm if this is the case for them please? Thanks

Some important python libraries icons are missing, such as numpy and scikit-learn.

How is the process of adding new icons?

I am trying to use Iconify in a Stencil component.

This repo: https://github.com/adaept/ae-svgtest-component/tree/iconify-test

I tried various suggestions from the documentation but cannot get it to work.

Specific Code: https://github.com/adaept/ae-svgtest-component/blob/iconify-test/src/components/ae-svgtest-component/ae-svgtest-component.tsx

I tried using import Iconify from '@iconify/iconify' but that gives the error "no module exported for alert" where alert is the test icon.

I am trying to use iconify but I cannot. Is this correct? Nothing shows for me. What should I do with Iconify after import? The documentation is very vauge.

import Iconify from '@iconify/iconify';
export function createIcon(iconName) {
  const icon = document.createElement("div");
  icon.innerHTML = `
    <span class="iconify" data-icon="${iconName}"></span>
  `
  return icon
}

Does it work with Typescript? i'm getting the declaration types error and can't find the correspondent @types.

The CC License doesn't exist. There are multiple different CC licenses.

Some icons report " CC 4.0" as "License", which means nothing, as in https://iconify.design/icon-sets/bx/bxs-network-chart.html. I suggest updating it once it gets fixed in the original source.

For that icon set, I opened an issue in atisawd/boxicons#111.

• https://github.com/microsoft/fluentui-system-icons

Does this package upload a JS file to the site and that's it?
Does it not save local copies of icon files?

In the Russian Federation, RosKomNadzor often blocks access to various IP addresses, trying to block access to Telegram. This can cause the inaccessibility of the destination server with icons, so it is extremely important to store them locally on the site.
Package can it?

Also interested in how it works with purifyCss?

First congrats ! Id like to propose addition of web-component implementation which i think will be an added bonus .

I should get the svg dom element in the ref.

Demo:

https://9ghol.csb.app/

index.js:27 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `App`.
    at Icon$1 (https://9ghol.csb.app/node_modules/@iconify/react-with-api/dist/icon.esm.js:2054:10)
    at div
    at App (https://9ghol.csb.app/src/App.js:24:34)

Thanks for this big library ! Maybe adding freeicons.io would be a good candidate ?

We have a bunch of svg icons in a directory: a.svg, b.svg etc. They're our brand internal icons that are not meant to be released as a public icon set for now. I'd like to make an internal package out of them, and use the good core API @iconify/react package has to convert the icons into React components.

The end goal is that we could do this:

import { Icon } from '@iconify/react';
import ourLogo from 'our-internal-package/ourLogo';

But how can one build the our-internal-package? I checked into the iconify documentation and tooling, and found that this script is handy to convert svg files into a JSON bundle. However the bundle is large and we'd like to split it into individual files. When checking @iconify/icons-teenyicons package, each icon corresponds to two files, for example add-outline icon:

node_modules/@iconify/icons-teenyicons/add-outline.d.ts:

interface IconifyIcon {
    body: string;
	left?: number;
	top?: number;
	width?: number;
	height?: number;
	rotate?: number;
	hFlip?: boolean;
	vFlip?: boolean;
}
declare const data: IconifyIcon;
export default data;

node_modules/@iconify/icons-teenyicons/add-outline.js:

var data = {
	"body": "<g fill=\"none\"><path d=\"M7.5 1v13M1 7.5h13\" stroke=\"currentColor\"/></g>",
	"width": 15,
	"height": 15
};
exports.__esModule = true;
exports.default = data;

How can we turn the icons JSON bundle into a set of type definition and JS files, similar to how @iconify/teeny-icons is released?

The @iconfiy/react package has a function that replaces all IDs with a combination of a randomly generated value and a counter value.

When using this library with server side rendering, this causes a HTML content mismatch between the client and server.

Possible solutions could be:

• Allow users to pass an id to the Icon component that will override the randomly generated id.
• Allow the user to pass in their own replaceIds function as a prop to component
• Change the ID generation to be deterministic

When I Run build inside GatsbyJS it says Building static HTML failed but only Iconify for React with API. method

Im wan't the Api version because I need to call the icon name with a string

Hi,

Today, I see all icon packages move to @iconify-icons/xxx instead of @iconify/icons-xxx
The @iconify-icons/xxx will crash in SSR, for example with Next.js.
Because NodeJS doesn't support ES modules syntax.

What happens if I'm still using the old@iconify/icons-xxx? Is it still up to date?

Using Sketch, the plugin opens but continues to load 'icon finder' to no end. The plugin was working fine at the beginning of my design session but randomly stopped working. I tried closing and reopening the plugin, and restarting Sketch (as instructed), I also rebooted my Mac but still no success.

Hey there!

I was wondering how you made the search function on your documentation website.
I want to create a custom Advanced Custom Fields field (for WordPress) where users can search for icons in Iconify, similar to the existing FontAwesome Field add-on:

We have our own API set up. I'd like to know if there are any functions available in Iconify to get a list of all available collections. Do you just search for icons whose names contain the search parameter and return them?

like is:

<span class="iconify" data-icon="carbon:bat" data-stroke-width="5">

<!-- or css -->
<span class="iconify stroke-5" data-icon="carbon:bat">

<style>
.stroke-5 {
  stroke-width: 5;
}
</style>

reference: https://iconpark.bytedance.com/official

https://github.com/teenyicons/teenyicons

Thanks for your hard work as always

hey there.
this projects looks promising.
I was looking for a way to get icons list of an iconset in json. e.g. material icons or font awesome full icons list. I couldn't find it in docs. or maybe I didn't read carefully 😅
is there a way for this?

thank you

feature

usually ,we add a entry icon-project in project , but use addIcon function to add icons is too difficult

so i design an addIcons function

here is the api

<template>
  <div>
    <Icon icon="minus-circle" />
  </div>
</template>

<script>
// Import component and addIcons function
import { Icon, addIcons } from '@iconify/vue';

// Import entry icon data.
import bx from '@iconify/json/json/bx.json';

// Assign all data
addIcons(bx, /bx-/);

export default {
  components: {
		Icon
	}
}
</script>

design

vue component add code

export function addIcons(data: IconifyJSON, reg: RegExp) {
	let iconfiyIcons: IconifyIcons = data.icons;
	for (let key in iconfiyIcons) {
		const keywordMatch = reg ? key.replace(reg, '') : key
		storage[keywordMatch] = fullIcon(
			Object.assign(iconfiyIcons[key], {
				height: data.height,
				width: data.width,
			})
		);
	}
}

ty for your time and i would love to contribute !

Hello, problem is in transform: rotate(360deg);
I using tailwind.css and if I use animate-spin class to span icon, style transform for svg, does not allow adding animation.

P.S.

.animate-spin{
animation: spin 1s linear infinite;
}

@keyframes spin {
from {
transform: rotate(0deg);
}   to {
transform: rotate(360deg);
} 

Thanks for making this and I have used it for a while. Being an icon lover, this is definitely a lifesaver!

I would love to help with improving the functionality/design of the website. However, I did not find the repo of it, did I missed it, or do you have any plain in open sourcing it?

Thanks!

I have created a bundle file of some Icons as described in this article:
https://iconify.design/docs/icon-bundles/. Everything went fine with that. Now when I use those icons in a static HTML file like in the guide then everything works fine. If I start using the icons in for example a ngIf directive then they do not show, there is not error in the console. It just does not get replaced with the SVG. If I move away from the bundle file and to the online version then the icons start showing again.

Belgian company @mono-company just released https://icons.mono.company. It would be nice if they could be added.

https://github.com/mono-company/mono-icons

some icon libraries have what is called a bleed(several pixel buffer from the edge) baked into the icon(Material design icons 24px = 20px icon) which is the proper way to design them for ensure consistent rendering/scaling, however some chose not to do this and give you a 1:1 icon (font-awesome 14px = 14px)

https://codepen.io/hanakin/pen/pooQMqL

I would suggest scripting in a change for those that do not behave the same to be displayed at the desired size regardless of which icon library you are pulling from.

for exp scaling font-awesome size down by 4px or increasing the others size by 4px etc...

Also remove all of the vertical-align stuff as this is not necessary by default. This should be applied by classes depending on the use.

• https://github.com/tabler/tabler-icons, requested by @chrishrtmn in antfu-collective/icones#7
• https://github.com/CoreyGinnivan/system-uicons

Thanks a lot :)

Context

While updating my package using npm this error shows up.

Already tried:

• Deleting node_modules and reinstalling
• Deleting package-lock.json and reinstalling
• npm rebuild
• npm cache clean --force

Current behavior

Expected

Installs/updates without an error

Hello,

I have used your framework for the first time today, and in comparison to other similar frameworks (devicon & font-mfizz), I have found it to be the most performant capable. Your library/framework seems to be the monst maintained and lightweight, not to mention complete with all my UI needs. However, there is something neither of those networks support, and yours doesn't either, which I would like to suggest: lazy loading for setting svg content.

It can be used in the following ways:

• on events (injectable prototype events or dom events)
• user interactivity (native web performance lazy loading which doesn't handle svg yet)
• trigger methods from configuration (personal user code design)

I would like to hear back from you, and know if there is any way to approach the subject currently. You can see an example of how I'm using your amazing framework here: https://sgonzalez.tech/about/ ... By the time of writing this review, I'm still using the other two libraries due to time constraint, but will probably phase completely to using this only.

P.S.: I found it extremely nice how when my script is disabled (and thus, svg paths not loaded yet), the data-icon text is still showing. Maybe this is a sign of readers being capable to understand what the icons represent? Anyway, that's cool.

Thanks!

tl;dr: lazy loading for svg pending

After an icon is loaded with the default: <span class="iconify" data-icon="noto:bird"></span> it's not easily possible to change this icon into another one. It looks like iconify does not react to any further changes to the data-icon attribute. I tried changing the data-icon attribute using JS (specifically Angular, but it's more a general thing) after an icon is loaded, but it just stays the same and nothing happens.

Any guidance on how one should do this or is this an improvement you would consider?

Can the icons work without any JS frameworks?

I installed @iconify/iconify package, but I'm stuck at how to use it.

First of all many thanks for developing this library. It's been of great use!

Unfortunately the base project I used for my project moved to React 17 recently. NPM install now returns:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from @iconify/[email protected]
npm ERR! node_modules/@iconify/react
npm ERR!   @iconify/react@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

Will this library support react 17 in the near future? Or is there something else I'm missing?

Извините, что по-русски. Думаю, что не получится донести мысль с моим уровнем английского :(

Было бы удобно сделать базу соответствия иконок каким-либо эмодзи и соответственно их обрабатывать, т.е. пишем в коде:
<span class="iconify" data-collection="mdi">📝</span>
а в результате подставляется иконка из набора MDI
<span class="iconify" data-icon="mdi:clipboard-edit" data-inline="false"></span>

Таким образом, можно обыграть ситуацию, когда иконки из iconify по какой-то причине не подгрузились. Это будет лучше чем сейчас - пустота вместо иконок.

Hi,

I love Iconify, so thanks a lot for your work. This is awesome.

A feature I would really like to see is an animate attribute. We could set it to rotate, pulsing, jumping, etc. That would be useful to use it as a spinner, interesting effects on hover, or to get user's attention.

Cheers :)

I want to use iconify offline in a Nodejs app. However, I do not want to bundle only a few limited icons like how it is shown in https://iconify.design/docs/icon-bundles/.

I want iconify to work like how it works when it is online. Is there a way to do that? Can I specify a path or install a package, so iconify imports the icons on demand from the disk instead of downloading them?

The app is a tool-bar for Atom and provides a service for others to add buttons. Previously, we bundled some icon sets with the app, and others could choose the icon they wanted to show by just choosing the name.

I'm working on a web app that uses the hosted iconify 1.0.4 script. I recently started sending Content Security Policy headers. This causes the iconify script to fail because it's attempting to apply an inline style dynamically.

To fix this, Chrome recommends either using the 'unsafe-inline' option, but that opens the door for everything and elsewhere they strongly recommend avoiding it. The other option is to us add a hash for the style. But if you look closely at the screenshot, the hash it recommends is already in my CSP.

Yeah, there's a bug in Chromium.

According to that bug, the real fix for now is to use 'unsafe-hashes' along with the hashes of the iconify scripts. In my case that ends up being script-src-attr 'unsafe-hashes' 'sha256-QlrbM8aOqzBK0DIi4eTKHWBQeoYW8/V+N7qXwMcKmqo='. That worked to address the errors. I'm still concerned about using 'unsafe-hashes' but it's way better than 'unsafe-inline'.

This might be worth adding to your documentation.

I haven't dug into the iconify script enough to understand whether the functionality that violates CSP is essential behavior or if there are workarounds that could be employed. So I thought I'd ask here.

Thanks!

Does Iconify come with a way to make an icon actively spin? If not then it might be worth considering.

I'm migrating one of our sites to Iconify, one of the most occurring icons is a spinning mdi-loading, using just materialdesignicons you would achieve it with mdi-spin:

<span class='mdi mdi-loading mdi-spin'></span>

My current implementation with Iconify is the following, which of course is fine on it's own:

.spin {
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

Thanks for making this!

I think life would be easier if the svg had a class of the icon name?
Instead we have to use
svg[data-icon="ic:round-access-time"]

which is much harder to write than:
.ic-round-access-time

And most of the time I wrap the svg in a span. Would be nice if there was a way to auto wrap it with data-wrap="span" or something. And the span can have the class.

Last, when using the inline method I find that the icon is randomly off here and there... its strange..

Notice the top one is different than the lower ones. All have the same markup and css.

For now I am setting inline false and using css to move it around.

• file-icons
• vscode-icons

They would be very useful for building apps with file lists or just indicating file types.

Thanks.

Feature request to support the title attribute.
E.g.
<i class="iconify" data-icon="ic:baseline-favorite-border" data-width="24px" title="Favorite"></i>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="24px" height="24px" style="vertical-align: -0.125em;-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" _ngcontent-c8="" class="iconify ng-tns-c8-0 ng-star-inserted" data-icon="ic:baseline-favorite-border" data-width="24px" title="Favorite"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" fill="currentColor"></path></svg>

SVG element does support title.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

Got this warning message in Chrome, wondering if its going to be an issue in the future?

A cookie associated with a cross-site resource at http://iconify.design/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

Environment:
Angular 8.2.0
Chrome 78.0
Windows 10
iconify 1.0.3

Thanks a lot

I'm trying to use Iconify with Rails, which uses Turbolinks. The issue is, on a Turbolinks page load, Iconify doesn't load in icons. It only inserts the icons on a regular, full page load.

With Turbolinks, you can listen for a Turbolinks load:

document.addEventListener("turbolinks:load", function() {
  // ...
})

Is there an Iconify method I can put inside of that listener to tell it to insert the icons? Or is there another solution?

I'm using Iconify via yarn + webpack, but I've also tried just using the <script> tag. It doesn't seem to make a difference.

Thanks for your great work.

At this moment, I lost a way to apply iconify in the custom elements. Could you help me?

What I did;

1. I made a small and simple web component to display some messages on a page. I want to add some iconify icons in that custom element. 
2. Of course, I've properly loaded iconify js (2.0.0-beta) on the page at first.
3. Also surely, icons are displayed normally outside of my custom element.
4. Slot also works. Icons injected with slot in shadowDom from the outer page would work as expected.
5. I could render a specific iconify icon with Iconify.renderSVG() in the customElement. This was a very hopeful sign for me because Iconify.js seems working in shadowDom without import JS in each customElement. When I tried with Font-Awesome, I should have injected all CSS rules into shadowDom because there be some issue about @font-face source path

But....

I've found only slotted icon was rendered again correctly. Other's were not. Maybe my approach was totally wrong.
EDIT
Renderable icons seem being cached.

**Problem **

// index.html
<mz-test>
  <span slot="ic" class="iconify-inline" data-icon="mdi-ab-testing"></span>
</mz-test>

// mz-test shadowDom

<p id="test1">slotted icon: <slot name="ic"></slot></p>
<p id="test2">direct rendering icon slotted:</p>
<p id="test3">direct rendering icon unslotted:</p>
<p id="test4">how to auto-convert??: <span class="iconify" data-icon="noto:angry-face" data-inline="false"></span></p>

// Trying to rendering after connectedCallback
    var slotted = Iconify.renderHTML('mdi-ab-testing')
    var test2 = myShadowDom.querySelector('#test2')
    test2.innerHTML += slotted

    var unslotted = Iconify.renderHTML('mdi-account-box')
    var test3 = myShadowDom.querySelector('#test3')
    test3.innerHTML += unslotted

What is the best approach to use iconify in custom Element? Could you show some hint?