Love to Hear From You! ×
Have any questions, feedback, bug to report? Is there something you'd want to see? Don't hesitate to reach out.

Documentation

Getting started with SVGBox is simple: browse to an iconset, pick the icon you want, and use the given IMG tag. There are two ways you use an icon:

SVG Fragments and Single Downloads

When you select an icon, the SRC attribute of the IMG tag will be either of:

//s.svgbox.net/$ICONSET.svg?fill=$FILL_COLOR#$ICON

or,

//s.svgbox.net/$ICONSET.svg?fill=$FILL_COLOR&ic=$ICON

In the first type, the whole iconset is downloaded at once and you can specify which icon to use by URL hashes—a technique called as SVG Fragments (read more). Another benefit of SVG Sprites is that you can use the LINK tag to preload the sprite asset for faster performance.

In the second, you specify a particular icon to download. If you're using very few icons from the set, then it makes more sense to download only a single one.

Specifying Fill Color

You can modify the fill color by the fill query parameter. The parameter supports multiple color formats:

  • Hex Format:  hero-solid.svg?fill=f50a0a&ic=heart  
  • RGB Format:   hero-solid.svg?fill=rgb(41,152,0)&ic=heart  
  • HSL Format:   hero-solid.svg?fill=hsl(14,100%,30%)&ic=heart  
  • Tailwind Palette Colors :   hero-solid.svg?fill=purple-600&ic=heart  
  • HTML5 Common Colors:   hero-solid.svg?fill=violet&ic=heart