How to embed SVG in HTML

Using SVG in HTML requires embedding HTML in documents.

Skip to list of available tools if you want to skip long explanation of how it all works.

Advantages

There are advantages and disadvantages of using SVG in HTML over using SVG in CSS.

Advantages:

• You can easily target elements inside icons, such as changing stroke-width or controlling SVG animations.

However, it also has big disadvantages:

• There can be multiple entries for each icon. While this can be solved with SVG sprites, it is not always possible.
• Deep DOM tree and large document size.

Security

Additionally, there could be security concerns.

SVG from untrusted sources should never be embedded in HTML. SVG can include scripts, links to external resources (fonts, other images) that could potentially be used for tracking.

All icons in Iconify packages pass very strict validation, so they do not contain any potentially harmful content, such as scripts and external resources.

Usage

All you have to do is insert <svg> elements in your HTML wherever you want to use it.

svg<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
   <path fill="currentColor" d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4Z"/>
</svg>

External images

One possible solution to deep DOM tree and large document size is linking to external SVG files using <img> or <picture> tags.

However, it cannot be used for monotone icons. It is not possible to change color of external image without generating separate images for each used color. That makes external images unusable in the Iconify ecosystem.

A workaround is to use icons as external mask images in CSS. See how to use SVG in CSS.

Tools

How to get SVG to add to your documents?

Components

For many frameworks, there are components that handle embedding SVG in HTML:

• Unplugin Icons for React, Vue, Svelte, Solid, Astro, Qwik.
• Astro Icon for Astro.
• Edge Iconify for Edge template engine.
• Iconify Prerendered is another option for Vue developers.

Functions

Not using any frameworks, but want to automate the build process?

Iconify Utils offers easy to use functions that generate SVG.

See how to export SVG with Iconify Utils.

No code

If you do not want to use any components, you can get SVG at one of the following websites:

• Iconify icon sets - official website.
• Icones - alternative website created by Anthony Fu.

Find icon you want to use, select it, copy SVG to clipboard, paste it to HTML.

Custom components

Want to build a custom component that generates SVG?

Currently, you'll need to use JavaScript for that. There are no usable libraries for other programming languages.

JavaScript

Iconify Utils package includes all functions you need. Process of generating SVG is simple:

• Locate icon set file.
• Read it and parse JSON.
• Use iconToSVG() to generate SVG content and attributes.
• Create an SVG element from it. See below.

Code samples that should help you:

• See Iconify Utils documentation for SVG.
• See parseIconSet() or getIconData() to extract icon data from an icon set.
• See iconToSVG() documentation.
• Source code for Iconify for Tailwind CSS for code to locate and load icon sets.

Convert iconToSVG result to SVG

Function iconToSVG() does not return full SVG, it returns attributes for <svg> element and contents.

This is done on purpose. Many frameworks, such as React, expect you to use the framework specific code to create elements.

So, for React, you need to create an element like this:

jsconst data = iconToSVG(icon, {});

return React.createElement('svg', {
   // Mandatory attributes
   xmlns: 'http://www.w3.org/2000/svg',
   xmlnsXlink: 'http://www.w3.org/1999/xlink',
   // width, height, viewBox
   ...data.attributes,
   // innerHTML
   dangerouslySetInnerHTML: {
       __html: data.body,
   },
});

For other frameworks that use native ways to create elements, use similar framework specific code.

If a framework does not have some way to set innerHTML, which is required to set contents of <svg>, this code cannot be used. You'll need to find a way to convert HTML string to tree of components.

If you want to create full <svg> element as string, you can use iconToHTML() function to convert the result of iconToSVG() to string:

jsconst data = iconToSVG(icon, {});

return iconToHTML(data.body, data.attributes);

See Iconify Utils examples.