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 describes 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
- aliases, Record<string, IconifyAlias>. List of aliases. Key is alias name, value is IconifyAlias alias data.
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:
{
"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
}
{
"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
}
}
}
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.