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:

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:

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 ​

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:

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:

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:

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:

that you can use in HTML like this:

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:

that you can use in HTML like this:

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:

• getIconCSS() to generate CSS for one icon.
• getIconsCSS() to generate CSS for multiple icons.

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:

Examples ​

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

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

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:

• getIconCSS() documentation.
• getIconsCSS() documentation.