Bare SVGs on the Web
You can add icons as bare SVGs into your markup, but you’ll need to do some heavy lifting to get them to fit in.
SVG Formats
Section titled “SVG Formats”Font Awesome provides SVG assets in two different formats:
Format | What’s the difference? | Impact on Rendering |
---|---|---|
Cropped | SVG viewbox width and height are cropped to the edges of the interior symbol. | Icons will only take up as much space as their dimensions need. |
Full | SVG viewbox width and height are set to a standard square based on the Icon Canvas | Icons will be rendered at a consistent width with surrounding whitespace. |
Basic Use
Section titled “Basic Use”With the power of vectors, the browser can draw an SVG in no time flat. Just add the SVG code straight into your HTML.
Optionally, you can add accessibility hints via aria
attributes, or leave out the xmlns
attribute which is optional in HTML5 documents.
<div class="time-to-get-ill"> <style> .icon { width: 1em; height: 1em; vertical-align: -0.125em; } </style> What time is it... <svg class="icon" aria-hidden="true" viewBox="0 0 512 512"> <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z" /> </svg></div>
Issues with Bare SVGs
Section titled “Issues with Bare SVGs”Make Sure to Add Some CSS
Section titled “Make Sure to Add Some CSS”But one of the downsides to SVG sprites is that extra styling is necessary to make them behave when it comes to sizing and alignment. Our Font Awesome javascript normally handles this, but in this case you will need to handle this yourself.
Here’s an example that limits the size and aligns an .icon
:
<!-- Simple styling to size an SVG --><style> .icon { width: 2em; height: 2em; vertical-align: -0.125em; }</style>
Visually Cropped Icons
Section titled “Visually Cropped Icons”Some icons may become visually cut off when using this method. This only occurs when all of the following are true:
- The Cropped SVG files are used.
- An icon’s height extends past the grid’s height of our Icon Canvas.
To avoid this issue, we recommend choosing one of the following:
Use the Full SVG Assets
Section titled “Use the Full SVG Assets”The Full SVG files include a viewbox contains the entire icon’s path. If you must reference an SVG via the <img>
element, use this format to avoid cropping portions of the icon that extend beyond the icon grid.
Use Inline SVG elements via <svg>
Section titled “Use Inline SVG elements via <svg>”The Cropped SVG files can be referenced inline via the <svg>
element. You’ll also need to include custom styling that adds overflow: visible;
. Here’s an example…
<div> <!-- eye-slash icon - without fix --> <svg viewBox="0 0 576 512"> <path d="M41-24.9c-9.4-9.4-24.6-9.4-33.9 0S-2.3-.3 7 9.1l528 528c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-96.4-96.4c2.7-2.4 5.4-4.8 8-7.2 46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1-47.1-43.7-111.8-80.6-192.6-80.6-56.8 0-105.6 18.2-146 44.2L41-24.9zM204.5 138.7c23.5-16.8 52.4-26.7 83.5-26.7 79.5 0 144 64.5 144 144 0 31.1-9.9 59.9-26.7 83.5l-34.7-34.7c12.7-21.4 17-47.7 10.1-73.7-13.7-51.2-66.4-81.6-117.6-67.9-8.6 2.3-16.7 5.7-24 10l-34.7-34.7zM325.3 395.1c-11.9 3.2-24.4 4.9-37.3 4.9-79.5 0-144-64.5-144-144 0-12.9 1.7-25.4 4.9-37.3L69.4 139.2c-32.6 36.8-55 75.8-66.9 104.5-3.3 7.9-3.3 16.7 0 24.6 14.9 35.7 46.2 87.7 93 131.1 47.1 43.7 111.8 80.6 192.6 80.6 37.3 0 71.2-7.9 101.5-20.6l-64.2-64.2z"/> </svg>
<!-- eye-slash icon - with fix --> <svg viewBox="0 0 576 512" style="overflow:visible;"> <path d="M41-24.9c-9.4-9.4-24.6-9.4-33.9 0S-2.3-.3 7 9.1l528 528c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-96.4-96.4c2.7-2.4 5.4-4.8 8-7.2 46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1-47.1-43.7-111.8-80.6-192.6-80.6-56.8 0-105.6 18.2-146 44.2L41-24.9zM204.5 138.7c23.5-16.8 52.4-26.7 83.5-26.7 79.5 0 144 64.5 144 144 0 31.1-9.9 59.9-26.7 83.5l-34.7-34.7c12.7-21.4 17-47.7 10.1-73.7-13.7-51.2-66.4-81.6-117.6-67.9-8.6 2.3-16.7 5.7-24 10l-34.7-34.7zM325.3 395.1c-11.9 3.2-24.4 4.9-37.3 4.9-79.5 0-144-64.5-144-144 0-12.9 1.7-25.4 4.9-37.3L69.4 139.2c-32.6 36.8-55 75.8-66.9 104.5-3.3 7.9-3.3 16.7 0 24.6 14.9 35.7 46.2 87.7 93 131.1 47.1 43.7 111.8 80.6 192.6 80.6 37.3 0 71.2-7.9 101.5-20.6l-64.2-64.2z"/> </svg></div>