× Search About Posts Code Music Links
Blank Try
experiment
lots
learn
more

Cloud Based Icons

Updated on
Last site update: 8 May 2024

Setting up icons can be a bit tiresome at times but using cloud based services can make it very efficient.

Two used here are Fontastic.me and Fontello.com. Both can create an icon font file and fontastic can create an SVG sprite containing all your icons. Both allow you to select only those icons you need so you’re not downloading anything extra.

Fontastic

Fontastic is the easiest way to create and deploy SVG sprites1 I’ve found.

  1. Go to Fontastic and sign up for an account.
  2. Select the icons you want by clicking (the outline turns yellow).
  3. Hit the customize tab and choose the letters and names you want associated with each icon.
  4. Hit the publish tab and then the SVG Sprite sub tab and click publish.
  5. Copy <script> code for file and add it to the <head> of your document.
  6. Below in the Icons reference section select and copy the code for each icon and paste it into your HTML files.
  7. Add some CSS. An easy way to do this is add another class name to the <svg> tags, for intance icon.
1<svg class="icon icon-links">
2   <use xlink:href="#icon-links"></use>
3</svg>
  1. Style your icons particularly the size and colour.
1.icon {
2    fill: currentcolor;
3    width: 1em;
4    height: 1em;
5    margin-right: .7ch
6}

Fontello

Fontello is very similar to Fontastic but less commercial; there are no paid options at all and nothing to sign up to.

Rather than add a link to the <head> you download a kit which includes multiple font and CSS files and a config.json file.

Unfortunately there is no SVG sprite option. There are 5 different font versions:

  1. .eot
  2. .svg which is an SVG font file. 1
  3. .ttf standard True Type.
  4. .woff
  5. .woff2 better compression and smaller file size than .woff.

In the file I used which comprised of 7 icons the SVG and woff2 were the smallest, both at 4k.

So compared to Fontastic it’s a bit more work to set up, you’re hosting the icons yourself so a tiny bit more bandwidth but you’re not dependent on an external source.

Fontello Fontastic
Icon sets Font Awesome Font Awesome
Entypo Octicons
Typicons Cittadino
Iconic Streamline Icons
Modern Pictograms Foundation Icons
Meteocons Entypo
MFG Labs Steadysets
Maki
Zocial Linecons
Brandico Just Vector
Elusive Social Icons
Linecons
Web Symbols
Cost Completely free Free tier
CDN No Yes
SVG SVG font file2 SVG sprite

More

Flaticon is a big commercial site. The main pro here is the huge range of icons. But amongst the numerous downsides are:

  • lots of advertising that can be hard to separate from the actual Flaticon site
  • you cannot download SVG’s and SVG sprites unless you have a paid account.
  • so basically it’s just PNGs.

See Icon sources on the links page.

  1. SVG Sprites are SVG files that contain multiple images, in this case icons. With one http request all you icons are cached by the browser to be used throughout a website or app. ↩︎ ↩︎

  2. SVG fonts are currently considered deprecated and only work on Safari browser. ↩︎

▲

External links