# Add custom icons

**URL:** <https://forum.ionicframework.com/t/add-custom-icons/559>\
**Category:** ionic-v1\
**Created:** [January 17, 2014, 9:27pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559 "2014-01-17T21:27:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![djaax](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@djaax](https://forum.ionicframework.com/u/djaax)\
**Post date:** [January 17, 2014, 9:27pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/1 "2014-01-17T21:27:50Z")

</div>

Is there a recommended way to add icons? I would like to extend the ionicons font (which are really great btw) with custom svg paths. Is that possible (via grunt maybe?) or do I have to use my own method (icon sprite etc)?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [January 17, 2014, 9:35pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/2 "2014-01-17T21:35:56Z")

</div>

Have you hear of [Iconmoon](http://icomoon.io)? Its a web based way to make your own icon packs. Its pretty good and they will generate the css and font files for you. Its not a grunt process but it can provide a good way to create your own icon pack and keep them separate from the default set

---

<div class="post-metadata">

**Author:** ![djaax](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@djaax](https://forum.ionicframework.com/u/djaax)\
**Post date:** [January 17, 2014, 10:23pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/3 "2014-01-17T22:23:43Z")

</div>

Thanks for the hint, i’ll give it a try!

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [January 17, 2014, 11:37pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/4 "2014-01-17T23:37:00Z")

</div>

Also if you’re looking for a process that involves grunt, you could always mess around with [Ionicons](http://ionicons.com/) and report back if it works or not. It does come with a grunt build process but I just haven’t had a chance to use it

---

<div class="post-metadata">

**Author:** ![daniel](https://avatars.discourse-cdn.com/v4/letter/d/3ec8ea/32.png) [@daniel](https://forum.ionicframework.com/u/daniel)\
**Post date:** [January 17, 2014, 11:37pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/5 "2014-01-17T23:37:50Z")

</div>

@ben actually wrote a quite nice and interesting article about their process of designing the icons with iconmoon: [http://ionicframework.com/blog/building-ionicons/](http://ionicframework.com/blog/building-ionicons/)

---

<div class="post-metadata">

**Author:** ![djaax](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@djaax](https://forum.ionicframework.com/u/djaax)\
**Post date:** [January 18, 2014, 9:24am UTC](https://forum.ionicframework.com/t/add-custom-icons/559/6 "2014-01-18T09:24:10Z")

</div>

@daniel that really is a nice article. i just tried to do it like ben did with IcoMoon and as @mhartington suggested and i have to say it’s really easy and solved my problem.

my initial problem was to add custom icons to my tab bar but with the given syntax `icon="ion-navicon"`. after generating my own icon font called “tictic” at icoMoon, i was able to implement my own icons to the tab bar, just as i wanted. so my tab bar looks something like this:

```
<tabs tabs-style="tabs-icon-top" tabs-type="tabs-light">

  <tab title="Events" icon="ion-navicon" href="#/tab/events">
    <nav-view name="events-tab"></nav-view>
  </tab>

  <tab title="Friends" icon="tictic-friends" href="#/tab/friends">
    <nav-view name="friends-tab"></nav-view>
  </tab>
</tabs>

```

in comparison to working with old school sprites, i takes some time to save every icon in a separate .svg file, upload, convert, download and implement. i’m really interested in a automated way. hence i’ll try some grunt plugins when i find some spare time and report my results here

---

<div class="post-metadata">

**Author:** ![djaax](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@djaax](https://forum.ionicframework.com/u/djaax)\
**Post date:** [January 18, 2014, 8:17pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/7 "2014-01-18T20:17:53Z")

</div>

yeeha, i think i’m in love with icon fonts 💗  
as i hoped, it is possible to create or rather extend the given icon font ionicons without too much effort.  
i used [grunt-webfont](https://github.com/sapegin/grunt-webfont). after installing the plugin and fontforge as described in the grunt-webfont doku and some hacking, it works perfectly fine. i just add my icons as svg files to a folder, execute `grunt webfont` and tada, i can use my icons the way i use ionicons. simple as that!

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [January 18, 2014, 9:36pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/8 "2014-01-18T21:36:14Z")

</div>

Great to hear that you found a nice grunt solution. Going to try this on my own projects!

---

<div class="post-metadata">

**Author:** ![dstsay](https://avatars.discourse-cdn.com/v4/letter/d/76d3ee/32.png) [@dstsay](https://forum.ionicframework.com/u/dstsay)\
**Post date:** [April 28, 2014, 12:53pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/9 "2014-04-28T12:53:03Z")

</div>

Would you mind posting step by step what you did? i.e. what sag and css files were generated, and where you placed them in the directory.

I know this may be straightforward, but it’ll help us novices figure this out. Thanks!

---

<div class="post-metadata">

**Author:** ![djaax](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@djaax](https://forum.ionicframework.com/u/djaax)\
**Post date:** [April 28, 2014, 4:49pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/10 "2014-04-28T16:49:28Z")

</div>

Yeah sure, it’s been a while but I’ll try:

So what you need first are your custom icons as svg files. Due to my directory arrangement I save them to “www/style/icons/yourIcon.svg”.

Next I set up Grunt and the grunt-webfont module. As I expect you guys to be quite familiar with Grunt, I just post a quick extract of my config. If you need more explanation, let me know and I will write some additional lines.

Here it goes:

```
module.exports = function(grunt) {
  grunt.initConfig({
    ...
    webfont: {
      icons: {
        src: 'style/icons/*.svg',
        dest: 'style/fonts',
        destCss: 'style/less/fonts',
        syntax: 'bem',
        options: {
          font: 'myFont',
          template: 'style/less/fonts/myFont_template.css',
          htmlDemo: false,
          stylesheet: 'less'
        }
      }
    }
  });
  ...
  grunt.loadNpmTasks('grunt-webfont');
};

```

Next thing you need to do is to set up your font css template. Now that’s the tricky part. Since I want to “extend” the great ionicons so I can use my own font in a very similar way, I couldnt just use the sample css template as it is delivered by grunt-webfont, but do some hacking. Here is what I came up with in the end: [http://codepen.io/djaax/pen/xImjq?editors=010](http://codepen.io/djaax/pen/xImjq?editors=010) (www/style/less/fonts/myFont\_template.css" as the webfont.options.template above). I didn’t checked, if it’s still working with the beta as I only worked on alpha yet - sorry.

What else you need is a myFont\_template.json file (www/style/less/fonts/myFont\_template.json"), including this:

```
{
  "baseClass": "icon",
  "classPrefix": "myFont-",
  "mixinPrefix": "myFont-"
}

```

That’s basically it. Now run the `grunt webfont` task and you’ll get your myFont.less (www/style/less/myFont.less) and your own font (www/style/fonts/myFonts-some\_crypt\_code\_like\_bh12jv3h1v23j.svg/.ttf/…).

Include the .less file in your html and use it like `<span class="icon myFont-someCoolSvg"></span>"`. Yey 😊

I hope this helps you @dstsay. If not, let me know!

---

<div class="post-metadata">

**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\
**Post date:** [April 28, 2014, 4:56pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/11 "2014-04-28T16:56:42Z")

</div>

Actually one of the easiest way to extend ionicons is to use our same build process, but modify what `svg` files are in the `src` folder in the ionicons repo:

> **[ionic-team/ionicons](https://github.com/ionic-team/ionicons)**
>
> ionicons - The premium icon font for Ionic

---

<div class="post-metadata">

**Author:** ![pedroccm](https://avatars.discourse-cdn.com/v4/letter/p/f07891/32.png) [@pedroccm](https://forum.ionicframework.com/u/pedroccm)\
**Post date:** [June 11, 2014, 5:54pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/12 "2014-06-11T17:54:10Z")

</div>

Adam I’m trying to use ionicon to generate new icons but I’m getting this error:

generate\_font.py line: 6 Undefined variable: import

You know how to solve?

---

<div class="post-metadata">

**Author:** ![lazaruslarue](https://avatars.discourse-cdn.com/v4/letter/l/9fc29f/32.png) [@lazaruslarue](https://forum.ionicframework.com/u/lazaruslarue)\
**Post date:** [September 26, 2014, 8:43pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/13 "2014-09-26T20:43:26Z")

</div>

@adam well, i think i’ve followed all the build-instructions in the [README.md](http://README.md), and when i run the command to build from the (updated) manifest the output css and css.map files still include all the ionicons & not my specified prefix.

would love to get some more details here. thanks in advance.

---

<div class="post-metadata">

**Author:** ![flomerboy](https://avatars.discourse-cdn.com/v4/letter/f/f0a364/32.png) [@flomerboy](https://forum.ionicframework.com/u/flomerboy)\
**Post date:** [February 8, 2015, 5:45pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/14 "2015-02-08T17:45:32Z")

</div>

like @dstsay asked, could you please break down which files were altered and where they exist in the file structure?

---

<div class="post-metadata">

**Author:** ![luukschoen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luukschoen/32/98585_2.png) [@luukschoen](https://forum.ionicframework.com/u/luukschoen)\
**Post date:** [April 1, 2015, 2:34pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/15 "2015-04-01T14:34:54Z")

</div>

Guys, just read this blog post: [http://www.omerwazir.com/posts/custom-icons-with-ionicons/](http://www.omerwazir.com/posts/custom-icons-with-ionicons/) .  
It’s a step by step tut so you could add icons to ionicons. CLI though, but i suppose that shouldn’t be a problem ;).

---

<div class="post-metadata">

**Author:** ![SubEffect](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/subeffect/32/65247_2.png) [@SubEffect](https://forum.ionicframework.com/u/SubEffect)\
**Post date:** [April 30, 2015, 2:59pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/16 "2015-04-30T14:59:07Z")

</div>

Oh this is funny.

I used Icomoon to create a single icon that is missing from Ionicons (all the rest are great for my app) and what I did was this-

1. Put all the files (ttf, eot, svg, woff) in the fonts folder in the Ionic app lib folder.
2. Added the correct css to ionic.css as per the details in the .svg
3. It didn’t work.
4. I created a new url ref, aping the Ionicon .eot one. Didn’t work.
5. I created the whole url ref for the whole lot.
6. It works! But… only for my icon. LOL.

This was relatively simple to do. What I really need to do is merge my tff, eot, woff and tff files with the Ionicon ones! I’m giving Font Forge a go at the moment. If it works this will be a really nice way to do it.

Edit: I followed some instructions on merging fonts with Font Forge. It didn’t work and ended up spoiling the Ionicons necessitating a new DL.

---

<div class="post-metadata">

**Author:** ![SubEffect](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/subeffect/32/65247_2.png) [@SubEffect](https://forum.ionicframework.com/u/SubEffect)\
**Post date:** [April 30, 2015, 6:47pm UTC](https://forum.ionicframework.com/t/add-custom-icons/559/17 "2015-04-30T18:47:22Z")

</div>

Solution!

I did the same as the previous post stated but I created a new font-face called MyFont, replicated the css for the Ionicons using my new name and there we go - both the Ionicons and MyFont icons work.

Using this method means it’s easy to add extra icons. Use icomoon to build your new icons.

**Warning!** My method gets overwritten when you update the CLI.

---

<div class="post-metadata">

**Author:** ![MattE](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/matte/32/66712_2.png) [@MattE](https://forum.ionicframework.com/u/MattE)\
**Post date:** [May 4, 2015, 7:09am UTC](https://forum.ionicframework.com/t/add-custom-icons/559/18 "2015-05-04T07:09:56Z")

</div>

I’ve come up with my own simple solution to add a custom icon.

Take a look at this thread for more information!

> [@Tutorial - Create custom icons, the easy way](http://forum.ionicframework.com/t/tutorial-create-custom-icons-the-easy-way/22293):
>
> Hi guys When I developped my own app with Ionic, I had the need for some custom icons. The forums did provide soms solutions, but they all looked so complicated and a bit difficult. Following, I’ve conducted my own investigation to find an easy solution and I found it. So I present you now with a tutorial/walkthrough that describes how I did it. I admit it’s a bit a CSS-hackey way and it makes 1 icon unusable, but it does the trick. –\> [http://blog.mattijs.be/ionic-framework-add-custom-icons…](http://blog.mattijs.be/ionic-framework-add-custom-icons-the-easy-way/)

---

<div class="post-metadata">

**Author:** ![santi](https://avatars.discourse-cdn.com/v4/letter/s/439d5e/32.png) [@santi](https://forum.ionicframework.com/u/santi)\
**Post date:** [May 26, 2015, 7:55am UTC](https://forum.ionicframework.com/t/add-custom-icons/559/19 "2015-05-26T07:55:48Z")

</div>

Nice tool in case you need to generate individual SVG files for each icon:  
[https://www.npmjs.com/package/font-blast](https://www.npmjs.com/package/font-blast)

---

<div class="post-metadata">

**Author:** ![WebsiteDesign](https://avatars.discourse-cdn.com/v4/letter/w/898d66/32.png) [@WebsiteDesign](https://forum.ionicframework.com/u/WebsiteDesign)\
**Post date:** [May 26, 2015, 10:13am UTC](https://forum.ionicframework.com/t/add-custom-icons/559/20 "2015-05-26T10:13:39Z")

</div>

**Your HTML with Navs**

```
<li>
    <span class="icon-pencil"></span>
    Analyze
</li>
<li> + </li>
<li>
    <span class="icon-paint-format"></span>Design
</li>
<li> + </li>

```

**Your CSS Code:**

section li:nth-child(even) {

color: #ededed;

width: 6%;

font-size: 2.5em;

height: 63px;

margin-top: 31.5px;

line-height: 63px;

}

section span {

padding: 15px 0;

font-size: 5em;

display: block;

color: steelblue;

transition: all .2s ease-in-out;

}

section li:hover span {

transform: translateY(-10px);

}

This is the actual Link – \> [Creating a Custom Icon Font with IcoMoon and Less](http://www.sitepoint.com/creating-custom-icon-font-icomoon-less/)

For Video Tutorials – \> Check out this Link --\> [Custom Font Icon with IcoMoon](http://www.brotsky.tv/2014/10/03/building-a-website-part-4-custom-font-icon-with-icomoon/)

[Next page](https://forum.ionicframework.com/t/add-custom-icons/559.md?page=2)