Icons

Create custom icon sets for use across the Umbraco backoffice.

Umbraco extension authors can create custom icon sets for use across the Umbraco backoffice using an extension type called icons.

Register a new set of icons

Icons must be registered in a manifest using the Extension API. The manifest can be added through the umbraco-package.json file, as shown below.

umbraco-package.json

{
    "$schema": "../../umbraco-package-schema.json",
    "name": "My Package",
    "version": "0.1.0",
    "extensions": [
        {
            "type": "icons",
            "alias": "My.Icons.Unicorn",
            "name": "My Unicorn Icons",
            "js": "/App_Plugins/MyPackage/Icons/icons.js"
        }
    ]
}

The file set in the js field contains the details of your icons. These definitions should resemble the following:

icons.js

export default [
    {
        name: "my-unicorn",
        path: () => import("./icon-unicorn.js"),
    },
    {
        name: "my-giraffe",
        path: () => import("./icon-giraffe.js"),
    }
]

Prefix each icon name to avoid collisions with other icons.

Each icon must define a path, either as a string or a dynamic import as shown above. This file must be a JavaScript file containing a default export of an SVG string. See an example below:

icon-unicorn.js

export default `<svg ...></svg>`;

Using Icons in your UI

The umb-icon element can automatically consume any registered icon.

<umb-icon name="my-unicorn"></umb-icon>