# Icons

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.

{% code title="umbraco-package.json" %}

```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"
        }
    ]
}
```

{% endcode %}

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

{% code title="icons.js" %}

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

{% endcode %}

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:

{% code title="icon-unicorn.js" %}

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

{% endcode %}

### Using Icons in your UI

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.