IconifyJSON metadata

IconifyJSON can also contain additional data that is used for displaying icons list:

  • Icon set info.
  • Categories. Each icon can belong to multiple categories.
  • Themes. They are used for variations of the same icon that have different start or end part.
  • Characters map. This is used for icons imported from icon fonts.

Information

Information is stored in info object.

See IconifyInfo documentation.

Categories

Categories are stored in categories object.

In TypeScript categories are represented by type IconifyCategories that can be imported from @iconify/types.

This is a simple object, where key is category name, value is array of icons names that belong to that category.

Example:

{
   "categories": {
       "Accessibility": ["accessible-icon"],
       "Audio & Video": ["youtube"],
       "Communication": ["bluetooth", "bluetooth-b"],
       "Currency": ["bitcoin", "btc", "ethereum", "gg", "gg-circle"],
       "Games": [
           "playstation",
           "steam",
           "steam-square",
           "steam-symbol",
           "twitch",
           "xbox"
       ]
   }
}

Themes: prefixes and suffixes

Themes are used to display variations of the same icon that have different prefix or suffix. It is similar to categories, but instead of listing every icon, data contains only prefixes or suffixes.

Themes are stored in themes object.

In TypeScript themes are represented by type IconifyThemes that can be imported from @iconify/types.

Theme is an object, where key is unique identifier for theme, value contains theme title and either prefix or suffix. Theme cannot contain both prefix and suffix, it must have only one of properties.

Example of prefixes used in Box Icons:

{
   "themes": {
       "bxl": {
           "title": "Logos",
           "prefix": "bxl-"
       },
       "bx": {
           "title": "Regular",
           "prefix": "bx-"
       },
       "bxs": {
           "title": "Solid",
           "prefix": "bxs-"
       }
   }
}

In an example above, all icons that start with "bxl-" belong to "Logos" theme, all icons that start with "bx-" belong to "Regular" theme and all icons that start with "bxs-" belong to "Solid" theme.

Prefix must end with "-".

Example of suffixes used in Ant Design Icons:

{
   "themes": {
       "filled": {
           "title": "Filled",
           "suffix": "-filled"
       },
       "outlined": {
           "title": "Outlined",
           "suffix": "-outlined"
       },
       "twotone": {
           "title": "TwoTone",
           "suffix": "-twotone"
       }
   }
}

In an example above, all icons that end with "-filled" belong to "Filled" theme, all icons that end with "-outlined" belong to "Outlined" theme and all icons that end with "-twotone" belong to "TwoTone" theme.

Suffix must start with "-".

Characters map

Characters map is stored in chars object.

In TypeScript characters are represented by type IconifyChars that can be imported from @iconify/types.

This is a simple object, where key is character code in hexadecimal form, value is name of icon.

Example:

{
   "chars": {
       "e007": "firefox-browser",
       "e013": "ideal",
       "e01a": "microblog",
       "e01e": "pied-piper-square",
       "e049": "unity",
       "e052": "dailymotion",
       "e055": "instagram-square",
       "e056": "mixer",
       "e057": "shopify"
   }
}