Converting SVG to Font Icon Using IcoMoon

Have you ever wondered how to effectively add many small icons to your website? These are more and more often a key part of the site’s design.

One of the more common ways of doing this is to use icons added to the website in the form of regular fonts. Some popular options to do it are Bootstrap Glyphicons or Font Awesome. These are easy to add to your project, but… what if you need a custom icon and none of the available shapes cut it for you? You could add it as a separate SVG file, but that increases the number of requests needed to fully load the page as well as adds to complexity in terms of maintenance – over time you may end up with dozens of such small files.

Converting SVG files to webfonts

No worries, there is a solution to this madness. There are generators that allow you to convert your beloved SVG files to webfonts. These allow you to upload any number of SVG files and they build a unique set of fonts, just for your project. Then, it’s as easy as adding a provided CSS class to your HTML code and your icon shows up on the page. Also, you won’t lose the advantage that an SVG file gives you – you can scale these icons as much as you like without losing the quality.

Scalability is important especially when you view the site on high-res screens like retina displays. Additionally, you don’t need to load a huge font file (eg. the whole set from Font Awesome or Glyph Icons), but you create a custom set with only what you need. That’s a great way to optimize the size of your website.

Finally, using font generators is easy, efficient and allows us to have control over how our icons look. This kind of web font behaves identically to any other font you’re using on the site: color, text-shadow, text-stroke, opacity, transform, transition.

Icon generators – how to convert SVG to font icon?

These days the most popular icon generators are IcoMoon, Fontello i Fontastic. All of them work somewhat similarly and you can choose all or some icons from predefined sets as well as add new icons from the uploaded SVG files. Personally, I use IcoMoon on most of our projects. It’s the only one that allows me to keep 4 custom projects at any time, which enables me to work on more than one website in the same time.

How to add a custom icon in IcoMoon?

Have you tried to find the perfect icon in the available sets and failed? No worries, I’ll guide you through the process of getting your SVG into the set.

Start by clicking on “Import Icons”. There are two formats the tool accepts:

SVG – it needs to be somewhat specific – more about this below
JSON – if you previously generated icon set and you have the selectiopn.json file – you can import it here.

Special needs for SVG files

What’s so special about the SVG files that you are uploading? Here’s the list:

1. All vectors should be merged together into a single compound path. Otherwise the tool will generate a separate font symbol for every path. Because of that you won’t be able to display the whole icon with a single CSS class.

If you’d like to check to see if your SVG has only one path, just follow these steps:

click on “Generate SVG & More”
locate the icon (in example icon-ecommerce”) and hover your mouse over it
click on “Get Code”

In the modal window that just opened, under “Symbol Definition(s)” you’ll see the source of the icon (in XML format). Make sure that it contains only one “path” attribute.

2. Don’t bother with colors. They will get ignored anyway. When creating the font app symbols will be interpreted as black. Same with backgrounds – they need to be transparent.

3. The toll will ignore any images you left in the SVG.

How to merge your vectors together into a compound path

If you’re using Inkscape

If your icon has more than one path:

Select all
Object -> Ungroup
Path -> Union
Path -> Combine
File -> Vacuum Defs (or Clean up document)
Save as -> Plain SVG

If you’re using Adobe illustrator

First Solution:

Select All
Object -> Compound Path > Make
Fill the Paths with color by choosing ‘Color’ on the right panel.
File -> Save As
In the “SVG Options” section, in the “SVG Profiles” dropdown choose default “SVG 1.1” file format.

Second Solution:

1. Select All
2. Window -> Pathfinder

3. In the opened window choose “Unite”
4. File -> Save As
5. In the “SVG Options” section, in the “SVG Profiles” dropdown choose default “SVG 1.1” file format.

Examples of converting SVG to font icon

Badly created icon:

SVG code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="Layer_1"
   x="0px"
   y="0px"
   width="311.52737"
   height="260.76901"
   viewBox="0 0 311.52739 260.76901"
   enable-background="new 0 0 2976.38 841.89"
   xml:space="preserve"
   inkscape:version="0.91 r13725"
   sodipodi:docname="ecommerce.svg"><metadata
     id="metadata45"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
     id="defs43" /><sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="686"
     inkscape:window-height="480"
     id="namedview41"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:zoom="0.11658458"
     inkscape:cx="155.29294"
     inkscape:cy="130.30099"
     inkscape:window-x="2687"
     inkscape:window-y="403"
     inkscape:window-maximized="0"
     inkscape:current-layer="Layer_1" /><g
     id="g3"
     transform="translate(-1332.897,-290.477)"><g
       id="g5"><path
         d="m 1412.866,473.525 c -2.122,0 -3.962,-1.534 -4.317,-3.66 L 1384.675,326.52 c -0.22,-1.321 0.176,-2.668 1.075,-3.66 0.898,-0.992 2.202,-1.519 3.536,-1.43 l 251.049,16.691 c 1.179,0.078 2.275,0.628 3.042,1.527 0.766,0.898 1.137,2.068 1.029,3.243 l -10.085,109.84 c -0.194,2.126 -1.895,3.802 -4.023,3.967 l -217.09,16.813 c -0.114,0.01 -0.229,0.014 -0.342,0.014 z m -18.641,-142.987 22.307,133.931 209.405,-16.219 9.336,-101.687 -241.048,-16.025 z"
         id="path7"
         inkscape:connector-curvature="0"
         style="fill:#222222" /></g><g
       id="g9"><path
         d="m 1575.653,516.021 -124.351,0 c -20.313,0 -37.479,-14.544 -40.817,-34.582 l -28.688,-172.201 c -0.966,-5.795 -5.931,-10.001 -11.806,-10.001 l -32.713,0 c -2.419,0 -4.381,-1.961 -4.381,-4.38 0,-2.419 1.962,-4.38 4.381,-4.38 l 32.713,0 c 10.176,0 18.773,7.285 20.446,17.321 L 1419.126,480 c 2.632,15.795 16.163,27.261 32.177,27.261 l 124.351,0 c 2.419,0 4.38,1.96 4.38,4.379 0,2.419 -1.962,4.381 -4.381,4.381 z"
         id="path11"
         inkscape:connector-curvature="0"
         style="fill:#222222" /></g><g
       id="g13"><path
         d="m 1450.278,551.246 c -12.127,0 -21.993,-9.865 -21.993,-21.993 0,-12.127 9.866,-21.992 21.993,-21.992 12.127,0 21.993,9.865 21.993,21.992 0,12.128 -9.866,21.993 -21.993,21.993 z m 0,-35.225 c -7.297,0 -13.233,5.936 -13.233,13.232 0,7.296 5.937,13.233 13.233,13.233 7.296,0 13.233,-5.937 13.233,-13.233 0,-7.296 -5.936,-13.232 -13.233,-13.232 z"
         id="path15"
         inkscape:connector-curvature="0"
         style="fill:#fcb316" /></g><g
       id="g17"><path
         d="m 1575.653,551.246 c -12.128,0 -21.993,-9.865 -21.993,-21.993 0,-12.127 9.865,-21.992 21.993,-21.992 12.127,0 21.993,9.865 21.993,21.992 0,12.128 -9.866,21.993 -21.993,21.993 z m 0,-35.225 c -7.297,0 -13.233,5.936 -13.233,13.232 0,7.296 5.937,13.233 13.233,13.233 7.296,0 13.233,-5.937 13.233,-13.233 0,-7.296 -5.936,-13.232 -13.233,-13.232 z"
         id="path19"
         inkscape:connector-curvature="0"
         style="fill:#fcb316" /></g><g
       id="g21"><path
         d="m 1469.709,469.219 c -2.233,0 -4.142,-1.701 -4.355,-3.97 l -12.567,-133.61 c -0.227,-2.408 1.542,-4.544 3.95,-4.771 2.41,-0.228 4.545,1.542 4.771,3.951 l 12.567,133.61 c 0.228,2.407 -1.542,4.544 -3.95,4.77 -0.14,0.014 -0.278,0.02 -0.416,0.02 z"
         id="path23"
         inkscape:connector-curvature="0"
         style="fill:#222222" /></g><g
       id="g25"><path
         d="m 1524.208,464.764 c -2.366,0 -4.315,-1.888 -4.376,-4.268 l -3.201,-124.316 c -0.062,-2.418 1.848,-4.429 4.266,-4.491 2.412,-0.044 4.43,1.848 4.492,4.267 l 3.2,124.316 c 0.062,2.418 -1.849,4.429 -4.266,4.491 -0.039,0.001 -0.077,0.001 -0.115,0.001 z"
         id="path27"
         inkscape:connector-curvature="0"
         style="fill:#222222" /></g><g
       id="g29"><path
         d="m 1577.52,460.141 c -0.086,0 -0.173,-0.002 -0.261,-0.008 -2.415,-0.141 -4.258,-2.213 -4.116,-4.628 l 6.785,-115.747 c 0.142,-2.416 2.202,-4.252 4.629,-4.117 2.415,0.142 4.258,2.214 4.116,4.628 l -6.785,115.747 c -0.137,2.329 -2.067,4.125 -4.368,4.125 z"
         id="path31"
         inkscape:connector-curvature="0"
         style="fill:#222222" /></g><g
       id="g33"><path
         d="m 1636.654,385.062 c -0.032,0 -0.063,0 -0.095,-0.001 l -239.163,-5.151 c -2.419,-0.052 -4.337,-2.055 -4.285,-4.473 0.053,-2.419 2.045,-4.353 4.474,-4.285 l 239.162,5.151 c 2.418,0.052 4.338,2.055 4.284,4.473 -0.051,2.387 -2.002,4.286 -4.377,4.286 z"
         id="path35"
         inkscape:connector-curvature="0"
         style="fill:#222222" /></g><g
       id="g37"><path
         d="m 1405.658,428.957 c -2.343,0 -4.284,-1.854 -4.374,-4.215 -0.092,-2.417 1.794,-4.451 4.21,-4.542 l 227.469,-8.633 c 2.407,-0.085 4.45,1.793 4.542,4.21 0.093,2.417 -1.793,4.452 -4.21,4.543 l -227.468,8.633 c -0.056,0.002 -0.112,0.004 -0.169,0.004 z"
         id="path39"
         inkscape:connector-curvature="0"
         style="fill:#222222" /></g></g></svg>

Styles:

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?ki59m0');
  src:  url('fonts/icomoon.eot?ki59m0#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?ki59m0') format('truetype'),
    url('fonts/icomoon.woff?ki59m0') format('woff'),
    url('fonts/icomoon.svg?ki59m0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ecommerce .path1:before {
  content: "e900";
  color: rgb(34, 34, 34);
}
.icon-ecommerce .path2:before {
  content: "e901";
  margin-left: -1.1943359375em;
  color: rgb(34, 34, 34);
}
.icon-ecommerce .path3:before {
  content: "e902";
  margin-left: -1.1943359375em;
  color: rgb(252, 179, 22);
}
.icon-ecommerce .path4:before {
  content: "e903";
  margin-left: -1.1943359375em;
  color: rgb(252, 179, 22);
}
.icon-ecommerce .path5:before {
  content: "e904";
  margin-left: -1.1943359375em;
  color: rgb(34, 34, 34);
}
.icon-ecommerce .path6:before {
  content: "e905";
  margin-left: -1.1943359375em;
  color: rgb(34, 34, 34);
}
.icon-ecommerce .path7:before {
  content: "e906";
  margin-left: -1.1943359375em;
  color: rgb(34, 34, 34);
}
.icon-ecommerce .path8:before {
  content: "e907";
  margin-left: -1.1943359375em;
  color: rgb(34, 34, 34);
}
.icon-ecommerce .path9:before {
  content: "e908";
  margin-left: -1.1943359375em;
  color: rgb(34, 34, 34);
}

Symbol Definitions(s) with to many paths:

Correctly one:

SVG code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
	 id="Layer_1" sodipodi:docname="ecommerce.svg" inkscape:version="0.91 r13725" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="311.527px"
	 height="260.77px" viewBox="0 0 311.527 260.77" enable-background="new 0 0 311.527 260.77" xml:space="preserve">
<sodipodi:namedview  id="namedview41" inkscape:window-maximized="0" inkscape:cy="130.30095" inkscape:cx="155.29294" inkscape:zoom="0.11658458" fit-margin-left="0" fit-margin-top="0" showgrid="false" guidetolerance="10" gridtolerance="10" objecttolerance="10" borderopacity="1" bordercolor="#666666" pagecolor="#ffffff" inkscape:current-layer="Layer_1" inkscape:window-y="0" inkscape:window-x="0" fit-margin-bottom="0" fit-margin-right="0" inkscape:window-height="480" inkscape:window-width="640" inkscape:pageshadow="2" inkscape:pageopacity="0">
	</sodipodi:namedview>
<path fill="#222222" d="M308.086,89.692l3.423-37.278c0.107-1.175-0.264-2.345-1.029-3.243c-0.767-0.898-1.863-1.448-3.042-1.526
	L59.85,31.183l-2.31-13.862C55.866,7.285,47.27,0,37.094,0H4.381C1.962,0,0,1.961,0,4.38s1.962,4.38,4.381,4.38h32.713
	c5.875,0,10.84,4.206,11.806,10.001l2.875,17.261c0.001,0.007,0.001,0.014,0.002,0.021l23.874,143.346
	c0.005,0.031,0.018,0.059,0.023,0.089l1.913,11.484c2.424,14.555,12.147,26.204,25.069,31.493c-4.461,4.027-7.27,9.853-7.27,16.321
	c0,12.128,9.866,21.993,21.993,21.993s21.993-9.865,21.993-21.993c0-4.964-1.655-9.548-4.44-13.232h90.268
	c-2.784,3.685-4.439,8.269-4.439,13.232c0,12.128,9.865,21.993,21.993,21.993c12.127,0,21.993-9.865,21.993-21.993
	c0-12.127-9.865-21.991-21.992-21.992l0,0H118.406c-16.014,0-29.545-11.466-32.177-27.261l-1.143-6.859l51.239-3.968
	c0.161,0.019,0.321,0.046,0.486,0.046c0.139,0,0.276-0.006,0.416-0.02c0.279-0.026,0.548-0.084,0.808-0.159l159.365-12.342
	c2.128-0.165,3.829-1.842,4.023-3.968l6.496-70.757c0.119-0.382,0.205-0.778,0.214-1.198
	C308.139,90.091,308.11,89.892,308.086,89.692z M117.381,252.009c-7.296,0-13.233-5.937-13.233-13.232s5.937-13.232,13.233-13.232
	s13.232,5.937,13.232,13.232S124.677,252.009,117.381,252.009z M255.989,238.776c0,7.296-5.937,13.232-13.232,13.232
	s-13.233-5.937-13.233-13.232s5.937-13.232,13.233-13.232S255.989,231.48,255.989,238.776z M69.572,89.543l54.98,1.184l3.47,36.894
	l-51.779,1.965L69.572,89.543z M133.367,90.916l51.559,1.11l0.86,33.4l-48.998,1.86L133.367,90.916z M184.7,83.26l-52.159-1.124
	l-3.534-37.576l54.791,3.643L184.7,83.26z M192.576,48.786l54.272,3.608l-1.886,32.163l-51.494-1.109L192.576,48.786z
	 M186.012,134.184L186.831,166l-46.066,3.567l-3.155-33.546L186.012,134.184z M194.767,133.852l47.412-1.8l-1.746,29.795
	l-44.856,3.475L194.767,133.852z M194.541,125.095l-0.847-32.879l50.756,1.093l-1.756,29.959L194.541,125.095z M253.214,93.497
	l45.637,0.983l-2.455,26.749l-44.907,1.705L253.214,93.497z M299.655,85.736l-45.928-0.989l1.862-31.771l46.787,3.11L299.655,85.736
	z M120.154,43.972l3.572,37.974l-55.619-1.198l-6.778-40.687L120.154,43.972z M77.695,138.296l51.149-1.941l3.188,33.89
	l-48.39,3.748L77.695,138.296z M249.248,161.165l1.726-29.446l44.614-1.693l-2.548,27.748L249.248,161.165z"/>
</svg>

Styles:

@font-face {
 font-family: 'icomoon';
 src:  url('fonts/icomoon.eot?49038q');
 src:  url('fonts/icomoon.eot?49038q#iefix') format('embedded-opentype'),
   url('fonts/icomoon.ttf?49038q') format('truetype'),
   url('fonts/icomoon.woff?49038q') format('woff'),
   url('fonts/icomoon.svg?49038q#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: 'icomoon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icon-ecommerce:before {
 content: "e900";
}

Symbol Definitions(s) with to one path:

Using web fonts created in IcoMoon

OK, so you got your crafted SVG into the IcoMoon tool and created the web font. Now you just need to add the webfont to your project. When adding it you may need to edit the paths in the CSS file to point to where you’re keeping the actual font files. This should be a piece of cake for you now.

Word of advice: when adding to the project, add not only font and css files, but also a selections.json file. You’ll need it if you ever need to add or modify your custom set. In that case you would need to provide this file to Icomoon. Without it, the tool will generate a new set and all your CSS classes for existing icons may change – that’s not good (as you can imagine).

Converting SVG files to webfonts

Icon generators – how to convert SVG to font icon?

How to add a custom icon in IcoMoon?

Special needs for SVG files

How to merge your vectors together into a compound path

If you’re using Inkscape

If you’re using Adobe illustrator

Examples of converting SVG to font icon

Using web fonts created in IcoMoon

Related Posts

How To Create a Perfect Website Outline?

Functional Specification Document: What Is It and How To Create It?

Planning a Website Project – A Complete Guide

Don't Miss Out!

Thank you!