Skip to content

SVG class

SVG class represents one icon. It is used in Iconify Tools in functions for icon content.


To create an instance, use this code:

tsimport { SVG } from '@iconify/tools';

const svg = new SVG(
   '<svg xmlns="" viewBox="0 0 24 24"><path d="M7 6v12l10-6z" fill="currentColor"/></svg>'

If you are working with icon sets, use function toSVG() of IconSet instance to get SVG instance:

tsconst svg = iconSet('home');
if (!svg) {
   throw new Error('Icon "home" is not available or invalid');


SVG instance has several properties, all are initialized when instance is created:

  • viewBox, ViewBox. Icon's viewBox. It is a simple object with numeric properties left, top, width and height.
  • $svg is a root element of SVG. For parsing XML, Iconify Tools uses cheerio library. This property is an object returned by cheerio after loading icon. You can use it to manipulate content directly.


The following methods are available:

  • load(content) replaces icon content. This is identical to creating new SVG instance, but it changes current instance instead of making new one.
  • toString() exports icon as string.
  • toMinifiedString() export icon as string, but without whitespace.
  • getBody() export icon's content as string (icon without <svg> tag).

Validating and cleaning up icon

Unfortunately many editors leave lots of junk in SVG files, sometimes multiplying icon file size several times.

SVG files might also contain scripts and links to external resources.

This is why after loading icon, it should be validated and cleaned up. See cleanupSVG() function.

Optimising icon

Cleanup process is very basic, it does bare minimum to get rid of bad stuff. However, icons often contain unnecessary or unused elements and attributes.

Before exporting icons, you need to properly fix them. Process can include:

  • Fixing color palette.
  • Scaling icons.
  • Optimising icons.

See icon manipulation functions.

Released under the Apache 2.0 License.