# Icons

****

With the `icons` extension, you can register additional icons for use in the Panel.

The default icons are based on the <a href="https://remixicon.com">Remix Icon</a> set which you can also use for finding matching ones for your custom icons.

## Example

As always, you first have to register the Plugin in a plugin folder's `index.php`.

```php "/site/plugins/icons/index.php"
<?php

Kirby::plugin('my/icons', [
    'icons' => [
    ]
]);
```

The second step is to create a corresponding `index.js` file with the Panel plugin:

```js "/site/plugins/icons/index.js"
panel.plugin('my/icons', {
  icons: {
    'my-icon': '<path d="M7,3V13H5v2H8a1,1,0,0,0,1-1V4h2V2H8A1,1,0,0,0,7,3Z" /><circle cx="2" cy="14" r="2" /><polygon points="12 0 12 6 16 3 12 0" />'
  }
});
```

You can now use this plugin in your blueprints or or plugins, for example:

```yaml
title: Page blueprint with new icon
icon: my-icon

# other stuff
```

## Viewbox

Kirby assumes that all icons are based on a `0 0 24 24` viewbox. If your SVG is based on a different viewbox, you can include the wrapping `<svg>` tag to specifc the viewbox.

```js "/site/plugins/icons/index.js"
panel.plugin('my/icons', {
  icons: {
    'my-icon': '<svg viewBox="0 0 18 18"><path d="M7,3V13H5v2H8a1,1,0,0,0,1-1V4h2V2H8A1,1,0,0,0,7,3Z" /><circle cx="2" cy="14" r="2" /><polygon points="12 0 12 6 16 3 12 0" /></svg>'
  }
});
```