<p>You were almost there with it. You need to specify a path to an SVG. It can be one of the ones that exists within <a href="https://github.com/craftcms/cms/tree/develop/src/icons" rel="nofollow noreferrer">Craft's icon directory</a>.</p>

<p>So your nav item would look like this:</p>

<pre class="lang-php prettyprint-override"><code>Event::on(
    Cp::class,
    Cp::EVENT_REGISTER_CP_NAV_ITEMS,
    function(RegisterCpNavItemsEvent $event) {
        $event-&gt;navItems[] = [
            'url' =&gt; 'contact-enquiries',
            'label' =&gt; 'Contact Enquiries',
            'icon' =&gt; '@app/icons/envelope.svg',
        ];
    }
);
</code></pre>

<p>And this is how it will show in the CP nav:</p>

<p><a href="https://i.sstatic.net/S9mhL.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/S9mhL.png" alt="enter image description here"></a></p>

CC BY-SA 4.0
2019-12-03T19:09:12.340Z
Ah, excellent, thank you
MattRogowski
CC BY-SA 4.0
2019-12-02T23:08:19.747Z
2019-12-02T23:08:19.747Z
nfourtythree
<p>When adding a navigation item, there is the option to specify an icon, but it seems to have to be a path to an SVG. I can see that Craft has its own icon library, and it has an icon I want to use.</p>

<p>I want to use the "mail" icon, so I tried this HTML:</p>

<p><code>'icon' =&gt; '&lt;span data-icon="mail"&gt;&lt;/span&gt;',</code></p>

<p>this is inside my registration of the navigation item:</p>

<pre><code>Event::on(
    Cp::class,
    Cp::EVENT_REGISTER_CP_NAV_ITEMS,
    function(RegisterCpNavItemsEvent $event) {
        $event-&gt;navItems[] = [
            'url' =&gt; 'contact-enquiries',
            'label' =&gt; 'Contact Enquiries',
            'icon' =&gt; '&lt;span data-icon="mail"&gt;&lt;/span&gt;',
        ];
    }
);
</code></pre>

<p>However, it doesn't show the icon.</p>

<p>I can't see anywhere in the docs that explain how to use these icons in your own navigation items, so is there a way to do it? It'd be a lot easier than having to include an SVG that doesn't match the other icons.</p>

<plugin-development><modules><plugin-navigation>
Use sidebar nav icons in modules and plugins
# Use sidebar nav icons in modules and plugins

(Asked by: username_0 on 2019-11-30)

When adding a navigation item, there is the option to specify an icon, but it seems to have to be a path to an SVG. I can see that Craft has its own icon library, and it has an icon I want to use.
I want to use the "mail" icon, so I tried this HTML:
'icon' => '',
this is inside my registration of the navigation item:
Event::on(
    Cp::class,
    Cp::EVENT_REGISTER_CP_NAV_ITEMS,
    function(RegisterCpNavItemsEvent $event) {
        $event->navItems[] = [
            'url' => 'contact-enquiries',
            'label' => 'Contact Enquiries',
            'icon' => '',
        ];
    }
);

However, it doesn't show the icon.
I can't see anywhere in the docs that explain how to use these icons in your own navigation items, so is there a way to do it? It'd be a lot easier than having to include an SVG that doesn't match the other icons.

**Tags:** plugin-development, modules, plugin-navigation


---

## 1 answers

### Answer by username_1 on 2019-12-02. Score: 4 | Accepted answer

You were almost there with it. You need to specify a path to an SVG. It can be one of the ones that exists within Craft's icon directory.
So your nav item would look like this:
Event::on(
    Cp::class,
    Cp::EVENT_REGISTER_CP_NAV_ITEMS,
    function(RegisterCpNavItemsEvent $event) {
        $event->navItems[] = [
            'url' => 'contact-enquiries',
            'label' => 'Contact Enquiries',
            'icon' => '@app/icons/envelope.svg',
        ];
    }
);

And this is how it will show in the CP nav:

> **Comments:**
> **username_0**: Ah, excellent, thank you  

---

