IconifyIcon Metadata

IconifyJSON type

All Iconify libraries share common object structures. They are described as types in @iconify/types NPM package.

For description of types and short explanation of TypeScript see types documentation.

This article explains IconifyJSON type.

Structure

Type IconifyJSON is an object that has the following required properties.

Required properties

  • prefix, string. Prefix for icons in JSON file. All icons in an icon set have the same prefix and icon set cannot include icons from other icon sets.
  • icons, Record<string, IconifyIcon>. List of icons. Key is icon name, value is IconifyIcon icon data.

Example:

{
   "prefix": "mdi",
   "icons": {
       "home": {
           "body": "<path d=\"M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z\" fill=\"currentColor\"/>",
           "width": 24,
           "height": 24
       }
   }
}

Other properties are optional:

Alias

Examples:

{
   "prefix": "mdi",
   "icons": {
       "house": {
           "body": "<path d=\"M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z\" fill=\"currentColor\"/>",
           "width": 24,
           "height": 24
       }
   },
   "aliases": {
       "home": {
           "parent": "house"
       }
   }
}
{
   "prefix": "bi",
   "icons": {
       "arrow-left": {
           "body": "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.854 4.646a.5.5 0 0 1 0 .708L3.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z\"/><path fill-rule=\"evenodd\" d=\"M2.5 8a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z\"/></g>",
           "width": 16,
           "height": 16
       }
   },
   "aliases": {
       "arrow-right": {
           "parent": "arrow-left",
           "hFlip": true
       }
   }
}

Default values

Also, IconifyJSON object might include any of the optional properties:

IconifyOptional is a simple object with the following properties, all properties are optional:

Properties for viewBox:

  • left, number. Left position of viewBox. Default value is 0.
  • top, number. Top position of viewBox. Default value is 0.
  • width, number. Width of viewBox. Default value is 16.
  • height, number. Height of viewBox. Default value is 16.

Transformations:

  • rotate, number. Number of 90 degrees rotations. Default value is 0.
  • hFlip, boolean. Horizontal flip. Default value is false.
  • vFlip, boolean. Vertical flip. Default value is false.

They are used as default values for icons that do not have those properties.

Example:

With default values:
{
   "prefix": "mdi",
   "icons": {
       "square": {
           "body": "<path d=\"M3 3v18h18V3\" fill=\"currentColor\"/>"
       },
       "triangle": {
           "body": "<path d=\"M1 21h22L12 2\" fill=\"currentColor\"/>"
       },
       "rectangle": {
           "body": "<path d=\"M4 6v13h16V6H4z\" fill=\"currentColor\"/>"
       },
       "small-circle": {
           "body": "<circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"currentColor\"/>",
           // Custom values override default values
           "width": 16,
           "height": 16
       }
   },
   // Default width and height for icons that do not have width or height
   "width": 24,
   "height": 24
}
Without default values:
{
   "prefix": "mdi",
   "icons": {
       "square": {
           "body": "<path d=\"M3 3v18h18V3\" fill=\"currentColor\"/>",
           "width": 24,
           "height": 24
       },
       "triangle": {
           "body": "<path d=\"M1 21h22L12 2\" fill=\"currentColor\"/>",
           "width": 24,
           "height": 24
       },
       "rectangle": {
           "body": "<path d=\"M4 6v13h16V6H4z\" fill=\"currentColor\"/>",
           "width": 24,
           "height": 24
       },
       "small-circle": {
           "body": "<circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"currentColor\"/>",
           "width": 16,
           "height": 16
       }
   }
}
Both examples are identical, first example has default values, second example does not.

Metadata

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

This is optional data that has no effect on rendering icons, so it was moved to a separate document.

See IconifyJSON metadata for details.