# Use custom svg for navicon

**URL:** <https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637>\
**Category:** Ignition Early Access\
**Created:** [September 28, 2019, 12:32pm UTC](https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637 "2019-09-28T12:32:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [September 28, 2019, 12:32pm UTC](https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637/1 "2019-09-28T12:32:49Z")

</div>

Hi  
I design some custom svg icon that I want to use in my menu tree navigation. The navIcon.path property only accept material/… library icon. I wonder how I can use my own icon in this component.

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [September 30, 2019, 5:11pm UTC](https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637/2 "2019-09-30T17:11:20Z")

</div>

Hi @nader.chinichian, the best way to do this is to create your own SVG icon sprite file in the same format as the material or ignition icon sprite files (format show below). This file will then live under the `<gateway install>\data\modules\com.inductiveautomation.perspective\icons` directory (you’ll see the `material` and `ignition` icon sprites in this directory). You’ll then reference your icon by `sprite-file-name\icon-id` inside of the designer.

### SVG Icon Sprite File Format

```auto
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<style>
			.icon { display: none }
			.icon:target { display: inline }
		</style>
	</defs>
	<svg viewBox="0 0 16 16">
		<g class="icon" id="about">
			<path d="M9,3l-2.62268e-07,7.10543e-15c-3.31371,1.44847e-07 -6,2.68629 -6,6c1.44847e-07,3.31371 2.68629,6 6,6c3.31371,-1.44847e-07 6,-2.68629 6,-6l5.32907e-15,2.62268e-07c0,-3.31371 -2.68629,-6 -6,-6Zm2,8.75v0c0,0.138071 -0.111929,0.25 -0.25,0.25h-3.5h-1.09278e-08c-0.138071,-6.03528e-09 -0.25,-0.111929 -0.25,-0.25c0,0 0,0 0,0v-0.5l2.66454e-15,-2.68211e-08c2.08482e-08,-0.138071 0.111929,-0.25 0.25,-0.25h0.75v-2h-0.75h-1.09278e-08c-0.138071,-6.03528e-09 -0.25,-0.111929 -0.25,-0.25c0,0 0,0 0,0v-0.5l2.66454e-15,-2.68211e-08c2.08482e-08,-0.138071 0.111929,-0.25 0.25,-0.25h2.49l-1.1365e-08,1.77636e-15c0.143594,-6.27669e-09 0.26,0.116406 0.26,0.26v2.74h0.75h-1.09278e-08c0.138071,-6.03528e-09 0.25,0.111929 0.25,0.25Zm-2.74,-6.75h1.48h-1.1365e-08c0.143594,-6.27669e-09 0.26,0.116406 0.26,0.26v1.48v0c0,0.143594 -0.116406,0.26 -0.26,0.26h-1.48h-1.1365e-08c-0.143594,-6.27669e-09 -0.26,-0.116406 -0.26,-0.26v-1.48l3.55271e-15,-3.92589e-08c2.16821e-08,-0.143594 0.116406,-0.26 0.26,-0.26Z"></path>
		</g>
	</svg>
	
    ...

</svg>

```

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [September 30, 2019, 5:24pm UTC](https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637/3 "2019-09-30T17:24:29Z")

</div>

Hi  
But how should convert my drawing to something like this:  
\<path d="M9,3l-2.62268e-07,7.10543e-15c-3.31371,1.44847e-07

Isn’t there any easier way to do this? If I some how can understand it it seems really time consuming.

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [September 30, 2019, 5:41pm UTC](https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637/4 "2019-09-30T17:41:47Z")

</div>

Opening an svg file in a text editor should provide you all the xml properties necessary to create your image. No need to necessarily understand what it means, just design your graphics in your favorite vector program and copy the xml from your saved file. You’ll have to massage it a little bit to fit the overall structure of the sprite file Josh mentioned, but all the xml drawing work is already done for you.

---

<div class="post-metadata">

**Author:** ![bvaldovinos](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bvaldovinos/32/6315_2.png) [@bvaldovinos](https://forum.inductiveautomation.com/u/bvaldovinos)\
**Post date:** [October 8, 2019, 5:19pm UTC](https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637/5 "2019-10-08T17:19:56Z")

</div>

Having a tough time finding that directory you’re referring to. I’m on Windows 10. Any help?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 8, 2019, 5:40pm UTC](https://forum.inductiveautomation.com/t/use-custom-svg-for-navicon/28637/6 "2019-10-08T17:40:20Z")

</div>

I amended Josh’s post, but assuming you used the installer and didn’t change the install location, the icons directory would be `C:\Program Files\Inductive Automation\Ignition\data\com.inductiveautomation.com.perspective\icons\`.