Icon fonts vs SVG icons

General Prog (Archived)
,
1

Continuing the discussion from Phoenix Blog Posts:

Why is this the case?

The reasons I found so far through the internet to pick SVGs over icon fonts are:

  • Many fonts are bloated.
  • When the code-points for the icons are badly chosen, the icons might conflict with emojis.

I have been using icon fonts for a long time now, usually using a service like IcoMoon to ensure that the icon fonts that are used are not bloated but only contain the icons that are required for the application.

Reasons I like to use icon fonts over e.g. SVG icons:

  • The files that are sent are smaller.
  • These icons work better together inline with the text that is there, as the are text. When using SVG-images, one keeps resizing, colour changes in the surrounding text are not applied to the SVG icons, etc.

Are there other reasons to use one over the other I have missed? What do you use for your front-end icon needs?

2 Likes
2

From what I read, icon fonts is a really nasty thing for those using screen readers or people substituting fonts altogether because of bad sight, dyslexia etc. And although I don’t do frontends I think it’s a good enough reason (for me at least) to serve pictures (that what icons are, right? :wink: ) in a picture format with proper ALT attribute.

4 Likes
3

We usually design all our icons from scratch at work - this is my preferred option.

This forum (Discourse platform) uses http://fontawesome.io

There are pros and cons for both SVG and Icon fonts - have a look at this: https://www.sitepoint.com/icon-fonts-vs-svg-debate/

4 Likes
4

Also, check out Inline SVG vs Icon Fonts [CAGEMATCH]. He does comparisons and has a large comment section.

4 Likes