Free Tool

SVG to Icon Font

Drop your SVG icons and get back a ready-to-use font with CSS, LESS & SCSS files — all in one zip.

Drop SVG files here

or

SVG only · up to 500 icons

How to use it

Unzip the download, copy the font files and stylesheet into your project, and you're three steps from icons.

1

Link the stylesheet

Copy the font files and the generated CSS into your project, then reference the CSS in your page <head>.

<link rel="stylesheet" href="myiconfont.css" />
2

Drop in an icon

Add the base class plus the icon name. Replace the "icon" prefix with whatever you set as your Class Prefix.

<i class="icon icon-heart"></i>
<span class="icon icon-star"></span>
3

Style it like text

Icons are just glyphs — control size and colour with the font-size and color properties.

.icon { font-size: 1.5rem; color: #f5a524; }