Extracting SVG from Font Awesome

Question

I want to get the SVG path data from Font Awesome glyphs so that I can use them straight up as SVG in my HTML. I thought it would be as easy as copy-pasting the path data from fontawesome-webfont.svg, but when I use it in my HTML the symbols are all rendering upside-down. Anyone know why?

(See Fiddle)

Font Awesome SVG:

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

... Ported to HTML SVG (and scaled down):

<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>

Angie · Answer 1 · 2022-06-15T15:28:34.053

118

UPDATE 2022 thanks to Chris Aelbrecht comment below:
official repo has the SVGs of the latest version for download

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

original answer:

Just get the ready svg icons from this github repo
They are already flipped and centered as needed

enter image description here

edited Jun 15 '22 at 15:28

answered Apr 17 '15 at 13:26

Angie

1,475
1
10
5

11

I found a lot of these had icons that were cropped on the sides, for example car – Bankzilla Dec 22 '15 at 20:41
2

Version 5 can be found here https://github.com/FortAwesome/Font-Awesome/blob/master/svgs – Chris Aelbrecht Mar 30 '21 at 19:25

score 76 · Accepted Answer · edited May 23 '17 at 12:26

76

All per the SVG specification...

Unlike standard graphics in SVG, where the initial coordinate system has the y-axis pointing downward, the design grid for SVG fonts, along with the initial coordinate system for the glyphs, has the y-axis pointing upward for consistency with accepted industry practice for many popular font formats.

As per this comment, Changing the wrapper to <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> seems to do the trick, where 1792 is the units-per-em and 1536 is the ascent on font-face element

edited May 23 '17 at 12:26

Community

1
1

answered Aug 07 '13 at 20:47

Robert Longson

118,664
26
252
242

7

For completeness of this answer, changing the wrapper to `` seems to do the trick, where `1792` is the `units-per-em` and `1536` is the `ascent` on `font-face` element. – mckamey Feb 28 '14 at 20:51
2

Re `1792 is the units-per-em`: Typo? I would think it would be `179.2` to match the height/width. – Nate Cook May 23 '18 at 00:59

score 23 · Answer 3 · answered Oct 20 '14 at 15:27

23

IcoMoon app makes this dead simple.

answered Oct 20 '14 at 15:27

jedierikb

12,752
22
95
166

3

IcoMoon is very easy to use, but I've found that it exports longer paths than the SVGs in [this GitHub repo](https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg). Try for comparison the fa-gift icon. The `path` is 837 characters via IcoMoon, vs. [514 in the repo](https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/gift.svg). – Dan Dascalescu Jun 30 '15 at 01:37

score 17 · Answer 4 · answered Oct 20 '14 at 15:49

17

Use fontforge script. There is a script I found online here:

fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf

See: http://fontforge.sourceforge.net/scripting.html

answered Oct 20 '14 at 15:49

jedierikb

12,752
22
95
166

score 10 · Answer 5 · answered Sep 10 '19 at 14:14

10

You can just download any Font-Awesome svg you need from their repo at Github

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

answered Sep 10 '19 at 14:14

muah

119
1
3

Not the pro icons – RWC Jan 21 '23 at 15:05

score 9 · Answer 6 · answered Jun 24 '16 at 15:54

9

There is also a node.js tool that will automate this for you, & create a before & after verify.html. https://github.com/eugene1g/font-blast

I've used it on other fonts, only 1 bad icon conversion so far, but rest in the font SVG was fine.

answered Jun 24 '16 at 15:54

tomByrer

1,105
12
21

score 5 · Answer 7 · answered Mar 13 '18 at 17:46

5

You can simply download the latest version of fa here: https://fontawesome.com/

And then go to the advanced-options/raw-svg folder. There you will find three folders brands, regular and solid containing all the latest icons available.

answered Mar 13 '18 at 17:46

Orlandster

4,706
2
30
45

score 2 · Answer 8 · answered Jul 29 '15 at 16:23

2

You can download them from flaticon.com here:

http://www.flaticon.com/packs/font-awesome

answered Jul 29 '15 at 16:23

John Dangerous

185
8

Can be helpful, but when you want to resize a path from 512x512 to 20x20, it requires a lot of scale-down button-mashing – nicolallias May 17 '18 at 10:25

Extracting SVG from Font Awesome

8 Answers8

Linked