iconify / iconify-sketch

Sketch plug-in for importing over 100,000 icons from 100+ icon sets, including Material Design Icons, FontAwesome, Jam Icons, Open Emoji and many others.

Iconify is the most versatile icon framework.

• Unified icon framework that can be used with any icon library.
• Out of the box includes 150+ icon sets with more than 200,000 icons.
• Embed icons in HTML with Iconify Icon web component or components for front-end frameworks.
• Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.
• Add icon search to your applications with Iconify Icon Finder.

For more information visit https://iconify.design/.

Iconify parts

There are several parts of project, some are in this repository, some are in other repositories.

What is included in this repository?

• Directory packages contains main reusable packages: types, utilities, reusable functions used by various components.
• Directory iconify-icon contains iconify-icon web component that renders icons. It also contains wrappers for various frameworks that cannot handle web components.
• Directory components contains older version of icon components that are native to various frameworks, which do not use web component.
• Directory plugins contains plugins for various frameworks, which generate icons.

Other repositories you might want to look at:

• Data for all icons is available in iconify/icon-sets repository.
• Tools for parsing icons and generating icon sets are available in iconify/tools repository.

Iconify icon components

Main packages in this repository are various icon components.

Why are those icon components needed? Iconify icon components are not just yet another set of icon components. Unlike other icon components, Iconify icon components do not include icon data. Instead, icon data is loaded on demand from Iconify API.

Iconify API provides data for over 200,000 open source icons! API is hosted on publicly available servers, spread out geographically to make sure visitors from all over the world have the fastest possible connection with redundancies in place to make sure it is always online.

Why is API needed?

When you use an icon font, each visitor loads an entire font, even if your page only uses a few icons. This is a major downside of using icon fonts. That limits developers to one or two fonts or icon sets.

If you are using typical icon set that is not a font, you still need to bundle all icons used in your application, even ones that visitor does not need.

Unlike icon fonts and components for various icon sets, Iconify icon components dynamically load icon data from Iconify API whenever it is needed.

This makes it possible to have an unlimited choice of icons!

Packages in this repository

There are several types of packages, split in their own directories.

Main packages

Directory packages contains main packages that are reusable by all other packages in this repository as well as third party components.

Main packages:

• Iconify types - TypeScript types.
• Iconify utils - common files used by various Iconify projects (including tools, API, etc...).
• Iconify core - common files used by icon components and plugins.
• API redundancy - library for managing redundancies for loading data from API: handling timeouts, rotating hosts. It provides fallback for loading icons if main API host is unreachable.

Web component

Directory iconify-icon contains iconify-icon web component and wrappers for various frameworks.

Package	Usage
Web component	Everywhere
React wrapper	React
SolidJS wrapper	SolidJS

Frameworks that are confirmed to work with web components without custom wrappers:

• Svelte.
• Lit.
• Ember.
• Vue 2 and Vue 3, but requires custom config when used in Nuxt (see below).
• React, but with small differences, such as using class instead of className. Wrapper fixes it and provides types.

Demo

Directory iconify-icon-demo contains demo packages that show usage of iconify-icon web component.

• React demo - demo using web component with React. Run npm run dev to start demo.
• Next.js demo - demo for web component with Next.js. Run npm run dev to start demo.
• Svelte demo with Vite - demo for web component with Svelte using Vite. Run npm run dev to start demo.
• SvelteKit demo - demo for web component with SvelteKit. Run npm run dev to start the demo.
• Vue 3 demo - demo for web component with Vue 3. Run npm run dev to start demo.
• Nuxt 3 demo - demo for web component with Nuxt 3. Run npm run dev to start demo. Requires custom config, see below.
• Vue 2 demo - demo for web component with Vue 2. Run npm run build to build demo and npm run serve to start it.
• SolidJS demo - demo using web component with SolidJS. Run npm run dev to start demo.
• Lit demo - demo for web component with Lit. Run npm run start to start demo.

Nuxt 3 usage

When using web component with Nuxt 3, you need to tell Nuxt that iconify-icon is a custom element. Otherwise it will show few warnings in dev mode.

Example nuxt.config.ts:

export default defineNuxtConfig({
	vue: {
		compilerOptions: {
			isCustomElement: (tag) => tag === 'iconify-icon',
		},
	},
});

This configuration change is not needed when using Vue with @vitejs/plugin-vue.

Iconify icon components

Directory components contains native components for several frameworks:

Package	Usage
React component	React
Vue component	Vue
Svelte component	Svelte

Deprecation notice

Components in directory components are slowly phased out in favor of iconify-icon web component. Components are still maintained and supported, but it is better to switch to web component.

Functionality is identical, but web component has some advantages:

• No framework specific shenanigans. Events and attributes are supported for all frameworks.
• Works better with SSR (icon is rendered only in browser, but because icon is contained in shadow DOM, it does not cause hydration problems).
• Better interoperability. All parts of applicaiton reuse same web component, even if those parts are written in different frameworks.

Deprecation status:

• SVG Framework: can be replaced with iconify-icon.
• React component: can be replaced with iconify-icon using @iconify-icon/react wrapper.
• Svelte component: can be replaced with iconify-icon, does not require Svelte specific wrapper.
• Vue 3 component: can be replaced with iconify-icon, does not require Vue specific wrapper.
• Vue 2 component: can be replaced with iconify-icon, does not require Vue specific wrapper. Make sure you are not using Webpack older than version 5.
• Ember component: can be replaced with iconify-icon, does not require Ember specific wrapper.

To import web component, just import it once in your script, as per iconify-icon README file.

Demo

Directory components-demo contains demo packages that show usage of icon components.

• React demo - demo for React component. Run npm run dev to start demo.
• Next.js demo - demo for React component with Next.js. Run npm run dev to start demo.
• Vue demo - demo for Vue component. Run npm run dev to start demo.
• Nuxt demo - demo for Vue component with Nuxt. Run npm run dev to start demo.
• Svelte demo with Vite - demo for Svelte component using Vite. Run npm run dev to start demo.
• SvelteKit demo - demo for SvelteKit, using Svelte component on the server and in the browser. Run npm run dev to start the demo.

Plugins

Directory plugins contains plugins.

Package	Usage
Tailwind CSS plugin	Tailwind CSS

Demo

Directory plugins-demo contains demo packages that show usage of plugins.

• Tailwind demo - demo for Tailwind CSS plugin. Run npm run build to build demo, open src/index.html in browser to see result.

Installation, debugging and contributing

See CONTRIBUTING.md.

Sponsors

Documentation

Documentation for all packages is available on Iconify documentation website:

• Types documentation.
• Utilities documentation.
• Icon components documentation.
• Tailwind CSS plugin documentation.

Licence

Iconify is licensed under MIT license.

SPDX-License-Identifier: MIT

Some packages of this monorepo in previous versions were dual-licensed under Apache 2.0 and GPL 2.0 licence, which was messy and confusing. This was later changed to MIT for simplicity.

This licence does not apply to icons. Icons are released under different licences, see each icon set for details. Icons available by default are all licensed under various open-source licences.

© 2020-PRESENT Vjacheslav Trushkin

iconify-sketch's Issues

Unable to install

When I download the repo, I do not initially see any "iconify.sketchplugin" file at all.

How do I install this plugin?

When closing the plugin modal Sketch crashes

Iconify wont connect

Hi,

A few weeks back iconify stopped connecting to the internet. Since then I have tried re-installing the plugin, have updated my sketch & have updated the plugin as well, but I keep getting the same message.

The message that I get says
"Loading Icon finder
If this message does not disappear in several seconds, there was a problem loading Iconify Icon Finder. Try right-clicking and selecting "Reload", check your internet connection. Plug-in cannot work offline because it retrieves all icon data from Iconify API.

If problem persists, open an issue at Iconify for Sketch GitHub repository: https://github.com/iconify/iconify-sketch/"

I have also tried connecting to different networks.

Current sketch version - 70.3 (109109)
Current Plugin version - 2.0.2
MAC OS version - 10.15.2 (19C57)

Do let me know if some other info is required.

Plugin not launching

I went to Plugins > Iconify and nothing happens. Restarted Sketch and still no-go.

Please advise. Thank you.

Can't change color of vector graphic

hi! When I try to import an icon (for instance a 'home' icon) I get the option to flip, rotate, and change color. However, the change color option does not work: Nothing happens when I change the HEX or click on the black frame to select a color.

Loading Icon Finder...

Keeps on loading. Internet connection is OK. Plugin version is 2.0.1

[EDIT] If I open network and reload, it given following error :

Don't work

Don't work for Sketch 53.2. Don't open Icons window.
(MacOS Mojave 10.14.3)

Copy icon or Drag&Drop

When I click Add Icon from plugin pop-up,
It's pasted to the opened file somewhere in the middle.

Ideal experience will be something similar to components:
Drag the icon from Iconify screen and drop it to the required frame.

Video description
https://www.loom.com/share/59dd318220e541c99960b0409c51bc52

Port for Figma

Figma have un-official plugins https://figmaplus.com/
would be great to have a port of sketch plugin for Figma.
Thanks for your great job!

Search function unclickable

Since I upgraded my MacOS to Catalina, I can no longer use the Search function of the Iconify plugin. Browsing is painfully slow. Help!

Cant change color by class with CSS / Sass

Hi, I can't change color by class, but i can change size. I'm use sass and follow the rule. icon loaded but can't change the color (I use icon as html data-icon).

I hope i can change the color again
Thank you,

Can't load Plug-in

I am using Sketch Version 69 (107357) and what seems to be the latest version of the Iconify plugin (1.1.6) 16 July 2020.
I am using this on a MacBook Air running mac OS Catalina v 10.15.5

I haven't had any issues with the plug-in until today. It will not load at all and throws the following message:

Loading icon finder...
If this message does not disappear in several seconds, there was a problem loading scripts. Make sure you have working internet and restart Sketch.

I have tried re-installing the plugin several times as well as restarting Sketch and I have checked my internet connection!

Doesn't open on macOS 13 / Safari 16

The plugin (v2.0.7, Sketch v89) does nothing when clicked. I don't know if it's related to the M1 architecture or not.
I couldn't even post an error message because Sketch DevTools doesn't support the M1 processor. :(

Uninstalling and reinstalling the plugin from a fresh download didn't fix the issue, it still doesn't open the icons window and seemingly nothing happens.

Jumbled vectors

Adding icons to my sketch files now shows jumbled vectors that look nothing like the intended icons. Seems to be happening with every icon.

I've uninstalled and reinstalled the package to no avail.

I'm on sketch version 57.1, Mac Mojave 10.14.6.

https://imgur.com/a/ujVogmF

How to use Font Awesome Pro?

Hi,

We have a Font Awesome Pro license and would like to take advantage of the extended range of icons + their Duotone alternatives.

How would I go about that with Iconify-Sketch, please?

Thanks,

Steve

Launching iconify 2.0.2 immediately crashes Sketch 70.1 running on M1 mac

Launching iconify 2.0.2 immediately crashes Sketch 70.1 running on M1 mac. All other plugins are working fine.

JavaScript errors

Split from #16

Plugin doesn't load

Upon launching, plugin displays a message:

Loading Icon Finder...

If this message does not disappear in several seconds, there was a problem loading Iconify Icon Finder. Try right-clicking and selecting "Reload", check your internet connection. Plug-in cannot work offline because it retrieves all icon data from Iconify API.

If problem persists, open an issue at Iconify for Sketch GitHub repository: https://github.com/iconify/iconify-sketch/

As suggested, I'm opening an issue.

unable to search/filter icons

Hi everyone,

I just downloaded the plugin and it's amazing.
I am able to browse through the plugin and import icons into sketch, but I've noticed that I am unable to use the search or filter functionality and type text in the input field. Would love if anyone could help me with this

I am running a Mac Os 11.2.3 (Big Sur)

Cheers

sessionVariable is not a function

I get the following error with version 1.1.1

MOJavaScriptException: TypeError: l.a.sessionVariable is not a function. (In 'l.a.sessionVariable("iconify-offset")', 'l.a.sessionVariable' is null)
default add-icon.js:69:3815
__skpm_run add-icon.js:85:130
__skpm_run [native code]

macOS 10.14
Sketch 52.6

Based on #2 I installed 1.0.2 and that seems to work great.

Also, thanks for your work. This plugin is so much better then past methods I've used to bring icon fonts into Sketch. 🍻

Sketch crashs on 10.15

Catalina update appears to have broken this update. Curious if anyone else is seeing the same issue?

Add Essential icons

A set of icons that are free and require no attribution http://www.essential-icons.com/