Display FontAwesome icons as svg

Question

I have no experience in using SVG, so need some help. I use an SVG element but the area around path is very large. How do I make an svg area and path area almost the same. I tried to remove height but that doesn't solve the problem.
Here's the screenshots in chome inspector: The size of svg is 64px X 128px, but size of path is around 22px X 37px P.S.: Actually I want the icon to have such sizes as if I use fontawesome pack:

I dont want to use Fontawesome CDN in React. So I used https://icomoon.io/app and selected separate elements and want to add it to the page as in this article : Icons as React Components

Here's an example of element:

<svg width="4em" height="8em" viewBox="0 0 1000 1000">
  
  <path d="M265.143 804.571c0-25.143-20.571-45.714-45.714-45.714s-45.714 20.571-45.714 45.714 20.571 45.714 45.714 45.714 45.714-20.571 45.714-45.714zM384 713.143v-402.286c0-9.714-8.571-18.286-18.286-18.286h-292.571c-9.714 0-18.286 8.571-18.286 18.286v402.286c0 9.714 8.571 18.286 18.286 18.286h292.571c9.714 0 18.286-8.571 18.286-18.286zM274.286 228.571c0-5.143-4-9.143-9.143-9.143h-91.429c-5.143 0-9.143 4-9.143 9.143s4 9.143 9.143 9.143h91.429c5.143 0 9.143-4 9.143-9.143zM438.857 219.429v585.143c0 40-33.143 73.143-73.143 73.143h-292.571c-40 0-73.143-33.143-73.143-73.143v-585.143c0-40 33.143-73.143 73.143-73.143h292.571c40 0 73.143 33.143 73.143 73.143z"
  fill="grey" />      
</svg>

Why do you put it as SVG and not as font (setting `font-size` for FA icons works) — Justinas, Feb 10 '17 at 11:40
possible duplicate of http://stackoverflow.com/questions/14984007/how-do-i-include-a-font-awesome-icon-in-my-svg .. Correct me if I am wrong?? — Sahil Dhir, Feb 10 '17 at 11:47
@SahilDhirI I don't want to include a font awesome icon in my svg. I used https://icomoon.io and convert them to svg, but the have a large kind of "margin" and I want to get rid of it, but got stuck — Taras Yaremkiv, Feb 10 '17 at 11:54

dippas · Accepted Answer · 2017-02-11T10:37:03.770

change your viewBox coordinates

UPDATE Based on OP's comment to answer:

The viewboxattribute has 4 coordinates, they are min-x, min-y, width, height.

So when using 22 150 400 725, you are saying that you want to start your viewbox at 22,150 with 400 wide and 725 high.

You have a good article on this here

svg {
  border: red solid
}

<svg width="4em" height="7.5em" viewBox="22 150 400 725">
  <path d="M265.143 804.571c0-25.143-20.571-45.714-45.714-45.714s-45.714 20.571-45.714 45.714 20.571 45.714 45.714 45.714 45.714-20.571 45.714-45.714zM384 713.143v-402.286c0-9.714-8.571-18.286-18.286-18.286h-292.571c-9.714 0-18.286 8.571-18.286 18.286v402.286c0 9.714 8.571 18.286 18.286 18.286h292.571c9.714 0 18.286-8.571 18.286-18.286zM274.286 228.571c0-5.143-4-9.143-9.143-9.143h-91.429c-5.143 0-9.143 4-9.143 9.143s4 9.143 9.143 9.143h91.429c5.143 0 9.143-4 9.143-9.143zM438.857 219.429v585.143c0 40-33.143 73.143-73.143 73.143h-292.571c-40 0-73.143-33.143-73.143-73.143v-585.143c0-40 33.143-73.143 73.143-73.143h292.571c40 0 73.143 33.143 73.143 73.143z"
  fill="grey" />
</svg>

It would be nice if you right a few words explaining why viewBox="22 150 400 725". May be for others it goes without saying, but not for me ( — Taras Yaremkiv, Feb 11 '17 at 10:02
This really helps to get the right vieBox parameters: var pathSVG = document.getElementById("svg1"); console.log(pathSVG.getBBox()); — Taras Yaremkiv, Feb 11 '17 at 20:01

Display FontAwesome icons as svg

1 Answers1