There are three ways to use any icon on SVGBox.

1. Use as an Image

You can directly link to any icon by using query params 'ic' and 'color'. The link is of this format:

Say you want to use the heart icon from the hero solid iconset. Then, the code you'll use will be:

Here, I am requesting the heart icon by specifying it in 'ic' param and customizing the color using an HTML5 color name (see all the colors you can use).

2. Using SVG Loader

Using icons as images is the simplest approach and is a good fit for many scenarios, but it has its drawbacks. You can't modify color on hover, or use CSS variables, and the color can't be inherited from the parent element (currentColor).

svg-loader solves this issue by requesting icon data via XHRs and creating inline SVG objects.

To use an icon via svg-loader, you must add the script to your code. Then, render the icon using data-src attribute. Example:

3. Use the raw SVG

You can also just copy the SVG code and use it directly in your project.

Specifying Fill Color

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

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