Icon Sets ​

What are icon sets?

Icon set is a set of icons, created by the same author or group of authors, published with the same name and license.

Examples ​

Several examples of icon sets:

• Material Design Icons
• Material Design Icons Light
• Tabler Icons
• Twitter Emoji

All icons in an icon set must have the following in common:

• Same license. License is per icon set, not per icon.
• Be either monotone or have hardcoded palette. Only one type of icons is stored in one icon set. See icon basics.

Additionally, icons in open source icon sets have the following in common:

• Icons use the same design principles: grid, padding.
• Icons thematically fit together.

Format ​

In Iconify icons are not stored one by one as SVG, they are stored as icon sets in an easy to read custom JSON format, which uses IconifyJSON type.

Advantages of using IconifyJSON to store icon sets:

• One file per icon set instead of many SVG files.
• Easy to read, supported by all programming languages.
• Stores only content of icon, without <svg> element. This makes it easy to manipulate icons without parsing XML, add custom attributes to <svg>, use framework native code to create SVG element in frameworks like React.
• Stores metadata, such as icon set author information, license, categories and themes used to filter icons, used when browsing available icons.
• Prevents duplication with aliases, which support basic transformations: flip and 90/180/270 degrees rotations. For example, instead of designing arrow-left, you can design only arrow-right and create an alias for it with horizontal flip.

Naming ​

Each icon set has a prefix. It is unique for each icon set.

Prefix naming rules are the same as icon naming rules: allowed characters are "a-z", numbers and "-". Hyphen cannot be used at start or end of name, 2 hyphens in a row "–" are not allowed.

Examples of valid prefixes: "mdi", "mdi-light", "fluent-emoji-flat".

Functions ​

To parse icon sets, Iconify Utils offers the following functions:

• parseIconSet() parses an entire icon set, calling custom function for every icon.
• getIconData() extracts data for an icon in IconifyIcon format.

To create convert icons to icon sets, use Iconify Tools.