Skip to content
On this page

Iconify Updates 2023

Support for require-trusted-types-for script policy 22 Jun

Several icon components have been updated:

  • Iconify Icon web component
  • SVG framework
  • Iconify for React

New versions of packages work in environments with strict content security policy "require-trusted-types-for 'script';".

Iconify icon components rely on innerHTML to render SVG instead of doing unnecessary complex parsing of HTML.

But it is not needed. All icons in Iconify ecosystem pass very strict validation. Icons that contain scripts, event listeners, external resources, raster images and fonts are not allowed. All unknown tags and attributes are removed.

About require-trusted-types-for security policy

Security policy mentioned above requires libraries to clean up HTML before assigning it to innerHTML property of a DOM element.

To add that policy to your document, all you have to do is add the following code to page header:

html<meta
 http-equiv="Content-Security-Policy"
 content="require-trusted-types-for 'script';"
/>

However, be aware that policy does not provide any actual security and is pretty much useless!

The process of cleaning up HTML is not regulated in any way, it is up to a library to decide how to clean up HTML.
This means libraries can just emulate clean up without doing any actual clean up.

Your website security should not rely on such useless "security" policies.

Iconify Tools 3.0 25 May

Iconify Tools version 3.0 is now available.

Changes:

  • Several functions are no longer asynchronous: cleanupSVG(), runSVGO().
  • New synchronous versions of many functions are available, including importDirectory().
  • Option to keep titles in imported icons.

The main purpose of these changes is to allow using Iconify Tools to import and parse icons in environments where async operations are not supported, such as configuration files of various tools.

Icon search improvements 19 May

Icon search engine in Iconify API has been massively improved.

The new version shows results relevant to the search query first, making it easier to find icons you want.

Comparison: API results comparison

New search is automatically available for anyone using API, so it is available at Iconify website, plugins for Figma/Sketch and Icones.

New Iconify website 16 May

Welcome to the new Iconify website!

It has been rewritten from ground up, powered by Vitepress.

New website includes:

  • Content of old website (basic pages, news and so on).
  • Documentation, which is now searchable.

Website is now open source, you can edit or suggest edits on GitHub repository.

P.S. Vitepress is awesome!

New Iconify documentation 21 Feb

Iconify documentation has been restructured and many parts have been rewritten.

New documentation focuses on developer experience, trying to help developers find the correct tools from Iconify ecosystem.

See new improved Iconify documentation.

Custom CSS in the Iconify Icon web component 28 Jan

Iconify Icon web component has been updated.

New version includes function to append custom CSS to icons: appendCustomStyle().

Function can be imported from:

  • iconify-icon package.
  • As static method from web component constructor.
  • As method from any <iconify-icon> element instance.

There are several limitations:

  • It affects all instances of <iconify-icon> rendered after function is called.
  • It does not affect instances created before function call.
  • You cannot add CSS only for one icon yet.

These limitations will be removed in future versions.

Example

jsimport { appendCustomStyle } from 'iconify-icon';

appendCustomStyle('svg [stroke-width="2"] { stroke-width: 1.5; }');

This will change stroke-width from 2 to 1.5 in all icons, rendered after that function call.

SVG without width and height with Iconify components 27 Jan

Iconify icon components have been updated.

New version includes ability to remove width and height properties from generated <svg>. Sometimes this is needed if you are using CSS to resize icon.

To remove width or height, set it to one of these values: "unset", "undefined", "none".

Example

Example usage in @iconify/vue component:

vue<Icon icon="mdi:home" height="unset" />

This will remove both width and height from rendered <svg> element.

Removing one attribute only

If you want to remove only one attribute, for example, width, you need to set value for height:

vue<Icon icon="mdi:home" width="unset" height="1em" />

This will remove only width attribute.

Web component

This function is not available in iconify-icon web component because it won't work as expected.

Iconify for Tailwind CSS 11 Jan

Iconify plugin for Tailwind CSS is available.

Iconify plugin is in early development stage, but already fully functional.

It creates CSS for icons, using icons as background and mask images. This allows you to use icons without any components, without inlining SVG.

See Iconify for Tailwind package for details.

HTML

Example usage in HTML:

html<span class="icon--mdi-light icon--mdi-light--account"></span>
<span class="icon--fluent-emoji icon--fluent-emoji--megaphone"></span>

Generate CSS for icons with Iconify API 9 Jan

Iconify API now can dynamically generate CSS for icons.

All you have to do is link to /{prefix}.css?icons=icon-names on API, where "{prefix}" is icon set prefix and "icon-names" is comma separated list of icon names.

This allows you to use icons without any components, without inlining SVG.

Monotone icons

The best part is, it works with monotone icons!

Monotone icons are rendered with color, set to currentColor, just like icon fonts or inline SVG! How is it done? By using icon as mask image with background color, set to currentColor.

See Iconify API documentation for examples.

Example

This example shows icons with hardcoded palette from Noto Emoji icon set.

Stylesheet link: https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal.

It generates this stylesheet:

css.icon--noto {
   display: inline-block;
   width: 1em;
   height: 1em;
   background: no-repeat center / 100%;
}

.icon--noto--1st-place-medal {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' width='128' height='128'%3E%3Cpath fill='%23176CC7' d='M69.09 4.24c-1.08.96-9.48 17.63-9.48 17.63l-6.25 25.21l24.32-2.23S97.91 7.23 98.32 6.36c.73-1.58 1.12-2.23-1.67-2.23c-2.79-.01-26.55-.79-27.56.11z'/%3E%3Cpath fill='%23FCC417' d='M81.68 43.29c-1.21-.65-36.85-1.21-37.69 0c-.76 1.1-.65 6.13-.28 6.78c.37.65 12.35 6.22 12.35 6.22l-.01 2.03s.66 1.59 7.34 1.59s7.37-1.35 7.37-1.35l.06-2.05s10.49-5.24 11.04-5.7c.56-.47 1.03-6.87-.18-7.52zM70.7 51.62s-.03-1.4-.72-1.75c-.69-.35-11.8-.29-12.74-.24c-.94.05-.94 1.73-.94 1.73l-7.6-3.7v-.74l28.3.2l.05.84l-6.35 3.66z'/%3E%3Cpath fill='%23FDFFFF' d='M59.26 51.17c-.94 0-1.48.98-1.48 2.67c0 1.58.54 2.91 1.73 2.81c.98-.08 1.32-1.58 1.23-2.91c-.09-1.58-.29-2.57-1.48-2.57z'/%3E%3Cpath fill='%23FCC417' d='M28.98 90.72c0 23.96 21.66 34.63 36.06 34.12c15.88-.57 34.9-12.95 33.75-35.81C97.7 67.37 79.48 57.1 63.7 57.21c-18.34.13-34.72 12.58-34.72 33.51z'/%3E%3Cpath fill='%23FA912C' d='M64.53 120.67c-.25 0-.51 0-.76-.01c-7.5-.25-14.91-3.41-20.33-8.66c-5.8-5.62-8.98-13.22-8.94-21.39c.09-19.95 17.53-29.2 29.36-29.2h.1c16.03.07 29.19 12.53 29.56 29.42c.16 7.52-2.92 15.41-8.96 21.35c-5.64 5.53-13.12 8.49-20.03 8.49zm-.69-55.94c-10.61 0-26.3 8.68-26.34 25.88c-.03 12.86 9.93 26.08 26.52 26.64c6.32.2 12.83-2.22 18.09-7.39c5.46-5.37 8.53-12.29 8.42-18.99c-.24-14.53-12.12-26.09-26.54-26.15c-.04 0-.12.01-.15.01z'/%3E%3Cpath fill='%23FEFFFA' d='M57.82 60.61c-.69-.95-8.51-.77-15.9 6.45c-7.13 6.97-7.9 13.54-6.53 13.92c1.55.43 3.44-6.53 9.97-12.38c6-5.36 13.84-6.1 12.46-7.99zm30.25 25.87c-2.41.34.09 7.56-5.5 15.64c-4.85 7.01-10.35 9.55-9.71 11.09c.86 2.06 9.67-3.07 13.75-11.43c3.7-7.57 3.26-15.56 1.46-15.3z'/%3E%3Cpath fill='%23FA912C' d='M55.85 77.02c-.52.77-.05 7.52.26 7.82c.6.6 5.16-1.55 5.16-1.55l-.17 18.05s-3.35-.04-3.7.09c-.69.26-.6 7.22-.09 7.56s14.18.52 14.7-.17c.52-.69.39-6.78.15-7.06c-.43-.52-3.7-.31-3.7-.31s.28-26.58.19-27.43s-1.03-1.38-2.15-1.12s-10.32 3.62-10.65 4.12z'/%3E%3Cpath fill='%232E9DF4' d='M25.51 3.72c-.63.58 23.46 43.48 23.46 43.48s4.04.52 13.06.6s13.49-.52 13.49-.52S56.79 4.15 55.67 3.72c-.55-.22-7.97-.3-15.22-.38c-7.26-.09-14.34-.18-14.94.38z'/%3E%3C/svg%3E");
}

.icon--noto--2nd-place-medal {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' width='128' height='128'%3E%3Cpath fill='%23176CC7' d='M69.09 4.24c-1.08.96-9.48 17.63-9.48 17.63l-6.25 25.21l24.32-2.23S97.91 7.23 98.32 6.36c.73-1.58 1.12-2.23-1.67-2.23c-2.79-.01-26.55-.79-27.56.11z'/%3E%3Cpath fill='%23CECDD2' d='M81.68 43.29c-1.21-.65-36.85-1.21-37.69 0c-.76 1.1-.33 6.87-.04 7.56c.52 1.2 12.03 6.43 12.03 6.43l-.22 2.38s.94.24 7.63.24s8.01-.34 8.01-.34l.02-2.15s10.36-5.04 10.88-5.74c.44-.58.59-7.73-.62-8.38zm-10.61 9.12s.33-1.47-.36-1.81c-.69-.35-12.53-.19-13.47-.14c-.94.05-.94 1.73-.94 1.73l-7.6-4.53v-.74l28.3.2l.05.84l-5.98 4.45z'/%3E%3Cpath fill='%23FDFFFF' d='M59.26 51.17c-.94 0-1.48.98-1.48 2.67c0 1.58.54 2.91 1.73 2.81c.98-.08 1.32-1.58 1.23-2.91c-.09-1.58-.29-2.57-1.48-2.57z'/%3E%3Cpath fill='%23CECDD2' d='M28.97 91.89c0 23.96 22.05 34.13 36.46 33.7c16.79-.5 34.51-13.24 33.36-36.1C97.7 67.83 79.33 58.2 63.55 58.31c-18.34.14-34.58 12.65-34.58 33.58z'/%3E%3Cpath fill='%239B9B9D' d='M64.53 121.13c-.25 0-.51 0-.76-.01c-7.5-.25-14.91-3.41-20.33-8.66c-5.8-5.62-8.98-13.22-8.94-21.39c.09-19.95 17.53-29.2 29.36-29.2h.1c16.03.07 29.19 12.53 29.56 29.42c.16 7.52-2.92 15.41-8.96 21.35c-5.64 5.53-13.12 8.49-20.03 8.49zm-.69-55.94c-10.61 0-26.3 8.68-26.34 25.88c-.03 12.86 9.93 26.08 26.52 26.64c6.32.2 12.83-2.22 18.09-7.39c5.46-5.37 8.53-12.29 8.42-18.99c-.26-14.53-12.14-26.09-26.56-26.16c-.02 0-.1.02-.13.02z'/%3E%3Cpath fill='%23FEFFFA' d='M58.09 61.47c-.69-.95-7.76-.68-15.37 5.87c-7.56 6.51-8.69 13.71-7.33 14.09c1.55.43 3.44-6.53 9.97-12.38c6-5.35 14.1-5.69 12.73-7.58zm29.79 26.25c-2.41.34.09 7.56-5.5 15.64c-4.85 7.01-10.35 9.55-9.71 11.09c.86 2.06 9.67-3.07 13.75-11.43c3.69-7.56 3.25-15.55 1.46-15.3z'/%3E%3Cpath fill='%232E9DF4' d='M25.51 3.72c-.63.58 23.46 43.48 23.46 43.48s4.04.52 13.06.6s13.49-.52 13.49-.52S56.79 4.15 55.67 3.72c-.55-.22-7.97-.3-15.22-.38c-7.26-.09-14.34-.18-14.94.38z'/%3E%3Cpath fill='%239B9B9D' d='M56.85 86.35c1.04.01 1.97-1.4 2.83-2.26c1.83-1.84 3.75-3.3 5.94-1.32C71 87.66 60.2 92.62 56.1 99.4c-3.06 5.06-3.68 8.95-2.83 9.99s21.54.99 21.82.47c.28-.52.57-7.45.09-7.78s-10.65-.14-10.65-.14s.85-1.98 4.34-5c3.83-3.31 6.9-7.86 6.08-13.24c-1.7-11.12-12.9-11.53-17.75-7.66c-4.73 3.77-3.71 10.27-.35 10.31z'/%3E%3C/svg%3E");
}

that you can use in HTML like this:

html<span class="icon--noto icon--noto--1st-place-medal"></span>
<span class="icon--noto icon--noto--2nd-place-medal-medal"></span>

API query can be customised. See Iconify API documentation for more examples and parameters.

Monotone example

Stylesheet link: https://api.iconify.design/mdi-light.css?icons=account,account-alert,home.

It generates this stylesheet:

css.icon--mdi-light {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
}

.icon--mdi-light--account {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M11.5 14c4.14 0 7.5 1.57 7.5 3.5V20H4v-2.5c0-1.93 3.36-3.5 7.5-3.5m6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5M11.5 5A3.5 3.5 0 0 1 15 8.5a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8 8.5A3.5 3.5 0 0 1 11.5 5m0 1A2.5 2.5 0 0 0 9 8.5a2.5 2.5 0 0 0 2.5 2.5A2.5 2.5 0 0 0 14 8.5A2.5 2.5 0 0 0 11.5 6Z'/%3E%3C/svg%3E");
}

.icon--mdi-light--account-alert {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10.5 14c4.14 0 7.5 1.57 7.5 3.5V20H3v-2.5c0-1.93 3.36-3.5 7.5-3.5m6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5M10.5 5A3.5 3.5 0 0 1 14 8.5a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 7 8.5A3.5 3.5 0 0 1 10.5 5m0 1A2.5 2.5 0 0 0 8 8.5a2.5 2.5 0 0 0 2.5 2.5A2.5 2.5 0 0 0 13 8.5A2.5 2.5 0 0 0 10.5 6M20 16v-1h1v1h-1m0-3V7h1v6h-1Z'/%3E%3C/svg%3E");
}

.icon--mdi-light--home {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='m16 8.41l-4.5-4.5L4.41 11H6v8h3v-6h5v6h3v-8h1.59L17 9.41V6h-1v2.41M2 12l9.5-9.5L15 6V5h3v4l3 3h-3v8h-5v-6h-3v6H5v-8H2Z'/%3E%3C/svg%3E");
}

that you can use in HTML like this:

html<span class="icon--mdi-light icon--mdi-light--account"></span>
<span class="icon--mdi-light icon--mdi-light--account-alert"></span>
<span class="icon--mdi-light icon--mdi-light--home"></span>

Parameters

API query can be customised.

You can change selectors, set hardcoded color for monotone icons, and download generated stylesheet.

See Iconify API documentation for more examples and parameters.

Generate CSS for icons with Iconify Utils 2 Jan

New functions for generating stylesheet for icons are available in Iconify Utils:

What do these functions generate? A stylesheet, which renders icons as background or mask images.

To use icon in your project, all you have to do is generate stylesheet, then add basic element, such as <span> to render icon:

html<span class="icon--tabler icon--tabler--code"></span>

Examples

Example of stylesheet generated for one icon with hardcoded palette using getIconCSS():

css.emoji--annoyed-face-with-tongue {
   display: inline-block;
   width: 1em;
   height: 1em;
   background: no-repeat center / 100%;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='72' height='72'%3E%3Cpath fill='%23fcea2b' d='M36.2 13.3A22.8 22.8 0 1 0 59 36.1a22.79 22.79 0 0 0-22.8-22.8Z'/%3E%3Cpath fill='%23ea5a47' d='M40.5 41.7c-1.8 4.3-2 6-5.5 8.9c-5.6 4.8-7.6-4.1-5.7-8.9Z'/%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='36' cy='36' r='23' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath stroke-miterlimit='10' stroke-width='2' d='M40.5 42.25c-1.8 5.8-6 10.7-9 9.8s-4-4.9-2.3-10.8'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.001' d='M46.8 39.7a4 4 0 0 0 0 6m-23-3c2.3-.8 6.8-1 10.5-1s8.3.2 10.5 1'/%3E%3Cpath stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M48.9 32.4a4.7 4.7 0 0 0-8.6 0m-8.6 0a4.7 4.7 0 0 0-8.6 0'/%3E%3C/g%3E%3C/svg%3E");
}

Example of stylesheet generated for multiple monotone icons from Tabler Icons using getIconsCSS():

css/* Common code is combined in one class that should be added to each icon */
.icon--tabler {
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color: currentColor;
   -webkit-mask: no-repeat center / 100%;
   mask: no-repeat center / 100%;
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
}

/* SVG for each icon. Class name should be combined with common class name used above */
.icon--tabler--code {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m7 8l-4 4l4 4m10-8l4 4l-4 4M14 4l-4 16'/%3E%3C/svg%3E");
}

.icon--tabler--crystal-ball {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6.73 17.018a8 8 0 1 1 10.54 0'/%3E%3Cpath d='M5 19a2 2 0 0 0 2 2h10a2 2 0 1 0 0-4H7a2 2 0 0 0-2 2zm6-12a3 3 0 0 0-3 3'/%3E%3C/g%3E%3C/svg%3E");
}

Background or mask

Generated code uses background or mask image for icons. What is the difference?

  • Background image is used for icons with hardcoded palette.
  • Mask image in combination with background color, set to currentColor is used for icons without palette. This combination renders icon with current text color, making it easy to change icon color by changing text color.

Advantages

Advantages of using stylesheet for icons instead of inline SVG:

  • Can be used with any framework. No need for special components.
  • No extra elements in DOM.
  • Instant rendering of animated icons.

However, there are also disadvantages:

  • Cannot target a specific element in icon, which makes things like changing stroke-width impossible. It has to be done at build time when providing icon data to getIconCSS() or getIconCSS().
  • Cannot mix currentColor and hardcoded palette in icon. This is not an issue when using Iconify icon sets, as such icons are not allowed, but it can be an issue when using custom icons.

Documentation

See documentation for more details:

Released under the Apache 2.0 License.