@iconify/iconify
Advanced tools
Iconify is the most versatile icon framework.
For more information visit https://iconify.design/.
There are many fonts and SVG sets available, but they all have one thing in common: using any font or SVG set limits you to icons that are included in that set and forces browsers to load entire font or icons set. That limits developers to one or two fonts or icon sets.
Iconify uses a new innovative approach to loading icons. Unlike fonts and SVG frameworks, Iconify only loads icons that are used on the page instead of loading entire fonts. How is it done? By serving icons dynamically from publicly available JSON API (you can make a copy of script and API if you prefer to keep everything on your servers).
Iconify SVG framework is designed to be as easy to use as possible.
Add this line to your page to load Iconify SVG framework (you can add it to <head> section of the page or before </body>):
<script src="https://code.iconify.design/2/2.0.0-rc.6/iconify.min.js"></script>
or
<script src="https://cdn.jsdelivr.net/npm/@iconify/iconify@2.0.0-rc.6/dist/iconify.min.js"></script>
or, if you are building a project with something like WebPack or Rollup, you can include the script by installing @iconify/iconify as a dependency and importing it in your project:
import Iconify from '@iconify/iconify';
To add any icon, write something like this:
<span class="iconify" data-icon="eva:people-outline"></span>
or this:
<span class="iconify-inline" data-icon="fa-solid:home"></span>
<a href="#">Return home!</a>
That is it. Change data-icon value to the name of the icon you want to use. There are over 70,000 premade icons to choose from, including FontAwesome, Material Design Icons, Tabler Icons, Box Icons, Unicons, Bootstrap Icons and even several emoji sets.
Do you want to make your own icon sets? Everything you need is available on GitHub: tools for creating custom icon sets, Iconify API application and documentation to help you.
Below is a shortened version of documentation.
Full documentation is available on Iconify website:
The syntax is similar to icon fonts. Instead of inserting SVG in the document, you write a placeholder element, such SPAN or I.
Iconify SVG framework finds those placeholders and uses the following logic to parse them:
data-icon attribute.SVG.This is done in a fraction of a second. Iconify SVG framework watches DOM for changes, so whenever you add new placeholders, it immediately replaces them with SVG, making it easy to use with dynamic content, such as AJAX forms.
Code examples above use different class names: the first example uses "iconify", the second example uses "iconify-inline".
What is the difference?
Usually, icon fonts do not render like normal images, they render like text. Text is aligned slightly below the baseline.
Visual example to show the difference between inline and block modes:
Why is the inline mode needed?
Use "iconify" for decorations, use "iconify-inline" if you want the icon to behave like an icon font.
In addition to using "iconify-inline" class, you can toggle inline mode with the data-inline attribute.
Set value to "true" to force inline mode, set value to "false" to use block mode.
Different ways to use block mode:
<span class="iconify" data-icon="eva:people-outline"></span>
<span class="iconify" data-icon="eva:people-outline" data-inline="false"></span>
Different ways to use inline mode:
<span class="iconify-inline" data-icon="eva:people-outline"></span>
<span class="iconify" data-icon="eva:people-outline" data-inline="true"></span>
<span
class="iconify"
data-icon="eva:people-outline"
style="vertical-align: -0.125em"
></span>
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.
Unlike icon fonts, Iconify SVG framework does not load the entire icon set. Unlike fonts and SVG frameworks, Iconify only loads icons that are used on the current page instead of loading entire icon sets. How is it done? By serving icons dynamically from publicly available JSON API.
Relying on a third party service is often not an option. Many companies and developers prefer to keep everything on their own servers to have full control.
Iconify API and icon sets are all available on GitHub, making it easy to host API on your own server.
For more details see Iconify API documentation.
You can also create custom Iconify API to serve your own icons. For more details see hosting custom icons in Iconify documentation.
While the default method of retrieving icons is to retrieve them from API, there are other options. Iconify SVG framework is designed to be as flexible as possible.
Easiest option to serve icons without API is by creating icon bundles.
Icon bundles are small scripts that you can load after Iconify SVG framework or bundle it together in one file.
For more details see icon bundles in Iconify documentation.
Another option is to import icons and bundle them with Iconify, similar to React and Vue components. Example:
// Installation: npm install --save-dev @iconify/iconify
import Iconify from '@iconify/iconify';
// Installation: npm install --save-dev @iconify/icons-dashicons
import adminUsers from '@iconify/icons-dashicons/admin-users';
// Unlike React and Vue components, in SVG framework each icon added with addIcon() name must have a
// prefix and a name. In this example prefix is "dashicons" and name is "admin-users".
Iconify.addIcon('dashicons:admin-users', adminUsers);
<span class="iconify" data-icon="dashicons:admin-users"></span>
See Iconify for React documentation for more details.
There are 2 types of icons: monotone and coloured.
Monotone icons use font colour, just like glyph fonts. To change colour, you can do this:
<span class="iconify icon-bell" data-icon="vaadin-bell"></span>
and add this to CSS:
.icon-bell {
color: #f80;
}
.icon-bell:hover {
color: #f00;
}
Sample:
By default all icons are scaled to 1em height. To control icon height use font-size:
<span class="iconify icon-clipboard" data-icon="emojione-clipboard"></span>
and add this to css:
.icon-clipboard {
font-size: 32px;
}
Sample:
you might also need to set line-height:
.icon-clipboard {
font-size: 32px;
line-height: 1em;
}
You can also set custom dimensions using data-width and data-height attributes:
<span
data-icon="twemoji-ice-cream"
data-width="32"
data-height="32"
class="iconify"
></span>
Sample:
You can rotate and flip icon by adding data-flip and data-rotate attributes:
<span
data-icon="twemoji-helicopter"
class="iconify"
data-flip="horizontal"
></span>
<span data-icon="twemoji-helicopter" class="iconify" data-rotate="90deg"></span>
Possible values for data-flip: horizontal, vertical.
Possible values for data-rotate: 90deg, 180deg, 270deg.
If you use both flip and rotation, the icon is flipped first, then rotated.
To use custom transformations use CSS transform rule. Add !important after rule to override the SVG inline style (inline style exists to fix an SVG rendering bug in Firefox browser).
<span data-icon="twemoji-helicopter" class="iconify icon-helicopter"></span>
.icon-helicopter {
transform: 45deg !important;
}
Samples:
There are over 70,000 icons to choose from.
General collections (monotone icons):
and many others.
Emoji collections (mostly colored icons):
Also, there are several thematic collections, such as weather icons, map icons, etc.
You can use browse or search available icons on the Iconify website: https://iconify.design/icon-sets/
Click an icon to get HTML code.
Why use Iconify instead of fonts or other frameworks?
There is a tutorial that explains all differences. See http://iconify.design/docs/iconify-svg-fonts/
Iconify supports all modern browsers.
Old browsers that are supported:
IE 9, 10 and iOS 8 Safari do not support some modern functions that Iconify relies on. Iconify will automatically load polyfills for those browsers. All newer browsers do not require those polyfills.
Iconify is dual-licensed under Apache 2.0 and GPL 2.0 license. You may select, at your option, one of the above-listed licenses.
SPDX-License-Identifier: Apache-2.0 OR GPL-2.0
This license does not apply to icons. Icons are released under different licenses, see each icon set for details. Icons available by default are all licensed under some kind of open-source or free license.
© 2020 Iconify OÜ
FAQs
Unified SVG framework with over 100,000 icons to choose from
The npm package @iconify/iconify receives a total of 33,224 weekly downloads. As such, @iconify/iconify popularity was classified as popular.
We found that @iconify/iconify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.