# How to add custom icons to ion-icons in ionic-v4

**URL:** <https://forum.ionicframework.com/t/how-to-add-custom-icons-to-ion-icons-in-ionic-v4/158961>\
**Category:** Ionic Framework\
**Created:** [March 13, 2019, 8:00am UTC](https://forum.ionicframework.com/t/how-to-add-custom-icons-to-ion-icons-in-ionic-v4/158961 "2019-03-13T08:00:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![michaelkariv](https://avatars.discourse-cdn.com/v4/letter/m/d6d6ee/32.png) [@michaelkariv](https://forum.ionicframework.com/u/michaelkariv)\
**Post date:** [March 13, 2019, 8:00am UTC](https://forum.ionicframework.com/t/how-to-add-custom-icons-to-ion-icons-in-ionic-v4/158961/1 "2019-03-13T08:00:06Z")

</div>

Alongside excellent ion-icons I would like to use my own. I have them both as SVG and also as an icon font (done using [icomoon.io](http://icomoon.io) online font builder).

Important to me is to make my icons adhere to the theme (using color defaults) but also be stylable with specific colors (using color attribute)

in ionic-v3 it was done using css+font. In ionic-v4, I am told (on ionic slack forum, by mike) icon font is no longer an option. Suggestion is to [use src attribute](https://ionicons.com/usage/) just so:

```auto
<ion-icon src="/path/to/external/file.svg"></ion-icon>

```

The problem with it, besides being less elegant then just using the ‘name’ attribute is styling - it does not react to color attribute. I tried it.

Options that I considered are

1. forking ion-icon repo. I hate it because I want downstream fixes
2. forking font awesome angular control. Not good because I want the same attributes as ion-icon
3. as above, except wrapping into something e.g. div that uses ionic styling. doable but a gut feeling there must be a better solution

Ideally, IMHO, ion-icon should be split into a web component for any set of gliphs adhering to certain principles (e.g. naming, that will make switching between ios and mg easy), AND a separate extendable set of icon glyphs.

Mike suggested I do a pull request. Before I do so, I would like to hear your opinions.

---

<div class="post-metadata">

**Author:** ![nvahalik](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nvahalik/32/123402_2.png) [@nvahalik](https://forum.ionicframework.com/u/nvahalik)\
**Post date:** [March 19, 2019, 1:24pm UTC](https://forum.ionicframework.com/t/how-to-add-custom-icons-to-ion-icons-in-ionic-v4/158961/2 "2019-03-19T13:24:36Z")

</div>

> [@michaelkariv](#):
>
> The problem with it, besides being less elegant then just using the ‘name’ attribute is styling - it does not react to color attribute. I tried it.

Then something isn’t quite right, because I’ve done the above and have used it with differing colors. It works as expected.

I actually tried the SVG font-generation route initially and used [IcoMoon App - Icon Font, SVG, PDF & PNG Generator](https://icomoon.io/app/#/select/font) to generate it. It detected several issues with the assets I was uploading and I ended up manually editing the SVG files directly to make sure that:

1. All of the internal styles are removed
2. Only paths remaing
3. Removing the “preview”

This resulted in SVG files that were much smaller and after getting them to play nicely with IcoMoon, I started using them as directed in the docs and they began working as expected. You might have to play with the viewbox some if you’re having positioning problems.

Good luck!

---

<div class="post-metadata">

**Author:** ![alitalaee](https://avatars.discourse-cdn.com/v4/letter/a/c5a1d2/32.png) [@alitalaee](https://forum.ionicframework.com/u/alitalaee)\
**Post date:** [February 15, 2020, 7:41pm UTC](https://forum.ionicframework.com/t/how-to-add-custom-icons-to-ion-icons-in-ionic-v4/158961/3 "2020-02-15T19:41:27Z")

</div>

check this [link](https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html)