diff --git a/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md b/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md
index d57653437e2..d9b56b4a5d8 100644
--- a/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md
+++ b/16/umbraco-cms/customizing/extending-overview/extension-types/icons.md
@@ -1,78 +1,64 @@
---
-description: Learn how to append and use Icons.
+description: Create custom icon sets for use across the Umbraco backoffice.
---
# Icons
-This article describes how to add and use more icons in your UI.
-
-{% hint style="warning" %}
-This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
-{% endhint %}
+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
-New icons can be added via an extension type called `icons`.
-
-You must add a new manifest to the Extension API to register icons. The manifest can be added through the `umbraco-package.json` file as shown in the snippet below.
+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
{
- "name": "MyPackage",
- "extensions": [
- {
- "type": "icons",
- "alias": "MyPackage.Icons.Unicorn",
- "name": "MyPackage Unicorn Icons",
- "js": "/App_Plugins/MyPackage/Icons/icons.js"
- }
- ]
+ "$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 holds the details about your Icons. The file should resemble the following:
+The file set in the `js` field contains the details of your icons. These definitions should resemble the following:
{% code title="icons.js" %}
-
-```typescript
+```javascript
export default [
{
- name: "myPackage-unicorn",
+ name: "my-unicorn",
path: () => import("./icon-unicorn.js"),
},
{
- name: "myPackage-giraffe",
+ name: "my-giraffe",
path: () => import("./icon-giraffe.js"),
}
]
```
-
{% endcode %}
-The icon name needs to be prefixed to avoid collision with other icons.
+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 of this in the code snippet below.
+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" %}
-
-```typescript
+```javascript
export default ``;
```
-
{% endcode %}
### Using Icons in your UI
-The `umb-icon` element is automatically able to consume any registered icon.
-
-The following example shows how to make a button using the above-registered icon.
+The `umb-icon` element can automatically consume any registered icon.
```html
-
-
-
+
```