A web component for SVG icon
Switch branches/tags
Nothing to show
Clone or download


SVG Icon Web Component

A small web component for SVG icon, supporting sprite, CSS styling, bitmap fallback.


The browser-side script is available in build folder.

Put this in your <head>.

<script type="text/javascript" src="iconwc.js"></script>

Then you can use the tag svg-icon in your HTML.

    <src href="cow.svg" />
    <src href="cow.png" /> <!-- PNG fallback for old browser -->

    <src href="sprite.svg#cow" /> <!-- sprite SVG is good to go -->

Browser support

Works fine with IE9, latest Chrome, Safari and Firefox Nightly. There's no SVG support on IE 8, so you need to declare a <src> element which points to a PNG file as a fallback.

Custom tag name

If you want another tag name, it's easy to build the script yourself.

The tag name is specified in entry.js:

let tagName = "someother-tagnameyoureallylike";

Then install Node.js and browserify and babel and grunt:

npm install -g babel
npm install -g browerify

After that, clone this repo to your local machine and cd to the directory.

cd /path/to/icon-webcomponent

Then run:

npm install

Finally run:


You will find your custom script in build/.

Use as a library

You can install this via npm:

npm install icon-webcomponent

Then use it in your own code

var wc = require("icon-webcomponent");

var fn = wc("your-tagname");

Attention please

By standard, your custom tag name must have a dash in it. tag-name is valid, but tagname is not.