npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@iconizza/iconizza

v0.0.2

Published

Unified SVG framework with over 100,000 icons to choose from

Downloads

31

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

dennisollhoffdennisollhoff

Keywords

Readme

What is Iconizza?

Iconizza 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 SVG framework 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 Iconizza Icon Finder.

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

Iconizza SVG framework

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.

Iconizza uses a new innovative approach to loading icons. Unlike fonts and SVG frameworks, Iconizza 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).

Iconizza SVG framework is designed to be as easy to use as possible.

Add this line to your page to load Iconizza SVG framework (you can add it to <head> section of the page or before </body>):

<script src="https://code.iconizza.design/3/0.0.2/iconizza.min.js"></script>

or

<script src="https://cdn.jsdelivr.net/npm/@iconizza/[email protected]/dist/iconizza.min.js"></script>

or, if you are building a project with something like WebPack or Rollup, you can include the script by installing @iconizza/iconizza as a dependency and importing it in your project:

import Iconizza from '@iconizza/iconizza'

To add any icon, write something like this:

<span class="iconizza" data-icon="eva:people-outline"></span>

    Sample

or this:

<span class="iconizza-inline" data-icon="fa-solid:home"></span>
<a href="#">Return home!</a>

    Screenshot

That is it. Change data-icon value to the name of the icon you want to use. There are over 200,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, Iconizza API application and documentation to help you.

Web component

SVG framework was designed a while ago, when browsers had poor support for web components.

However, this is no longer an issue. All modern browsers support web components.

A newer replacement for SVG framework is available: Iconizza Icon web component. Consider switching to it.

Full documentation

Below is a shortened version of documentation.

Full documentation is available on Iconizza website:

How does it work?

The syntax is similar to icon fonts. Instead of inserting SVG in the document, you write a placeholder element, such SPAN or I.

Iconizza SVG framework finds those placeholders and uses the following logic to parse them:

  1. Retrieves icon name from data-icon attribute.
  2. Checks if icon exists. If not, it sends a request to Iconizza API to retrieve icon data.
  3. Replaces placeholder element with SVG.

This is done in a fraction of a second. Iconizza 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.

Offline usage

SVG framework is designed to be used with Iconizza API, loading icon data on demand instead of bundling it.

If you want to use icons without Iconizza API, there are many other options available.

Attributes

There are optional attributes to customise icon appearance.

Vertical alignment

Code examples above use different class names: the first example uses "iconizza", the second example uses "iconizza-inline".

What is the difference?

  • "iconizza" renders icon as is, so it behaves like an image.
  • "iconizza-inline" renders adds vertical alignment to the icon, making it behave like text (inline mode).

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:

    Inline icon

Why is the inline mode needed?

  • To easily align icons within the text, such as emojis.
  • To make the transition from outdated icon fonts to SVG easier.

Use "iconizza" for decorations, use "iconizza-inline" if you want the icon to behave like an icon font.

data-inline attribute

In addition to using "iconizza-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="iconizza" data-icon="eva:people-outline"></span>
<span class="iconizza" data-icon="eva:people-outline" data-inline="false"></span>

Different ways to use inline mode:

<span class="iconizza-inline" data-icon="eva:people-outline"></span>
<span class="iconizza" data-icon="eva:people-outline" data-inline="true"></span>
<span
	class="iconizza"
	data-icon="eva:people-outline"
	style="vertical-align: -0.125em"
></span>

Iconizza API

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, Iconizza SVG framework does not load the entire icon set. Unlike fonts and SVG frameworks, Iconizza 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.

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

Iconizza API and icon sets are all available on GitHub, making it easy to host API on your own server.

For more details see Iconizza API documentation.

You can also create custom Iconizza API to serve your own icons. For more details see hosting custom icons in Iconizza documentation.

Color

There are 2 types of icons: monotone and coloured.

  • Monotone icons are icons that use only 1 colour and you can change that colour. Most icon sets fall into this category: FontAwesome, Unicons, Material Design Icons, etc.
  • Coloured icons are icons that use the preset palette. Most emoji icons fall into this category: Noto Emoji, Emoji One, etc. You cannot change the palette for those icons.

Monotone icons use font colour, just like glyph fonts. To change colour, you can do this:

<span class="iconizza icon-bell" data-icon="vaadin-bell"></span>

and add this to CSS:

.icon-bell {
	color: #f80;
}
.icon-bell:hover {
	color: #f00;
}

Sample:

    Sample

Dimensions

By default all icons are scaled to 1em height. To control icon height use font-size:

<span class="iconizza icon-clipboard" data-icon="emojione-clipboard"></span>

and add this to css:

.icon-clipboard {
	font-size: 32px;
}

Sample:

    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="iconizza"
></span>

Sample:

    Sample

Transformations

You can rotate and flip icon by adding data-flip and data-rotate attributes:

<span
	data-icon="twemoji-helicopter"
	class="iconizza"
	data-flip="horizontal"
></span>
<span data-icon="twemoji-helicopter" class="iconizza" 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.

<span data-icon="twemoji-helicopter" class="iconizza icon-helicopter"></span>
.icon-helicopter {
	transform: 45deg;
}

Samples:

    Sample

Available icons

There are over 200,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 Iconizza website: https://icon-sets.iconizza.design/

Click an icon to get HTML code.

Browser support

Iconizza SVG framework supports all modern browsers.

License

This package is licensed under MIT license.

SPDX-License-Identifier: MIT

Previous versions of this package 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 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.

© 2019-PRESENT Dennis Ollhoff