Troubleshooting

Check icon name spelling

Icon names use kebab-case (lowercase with hyphens). Common mistakes include:

• Using spaces instead of hyphens: arrow right → arrow-right
• Using camelCase: arrowRight → arrow-right
• Using underscores: arrow_right → arrow-right

Try searching without source parameter

If you are unsure which source contains the icon, use the search endpoint to find it across all sources:

curl "https://svg-api.org/v1/search?q=home"

Check available sources

Verify the source library exists and contains the icon you need:

curl "https://svg-api.org/v1/sources"

Understanding rate limits

SVG API has tiered rate limits to ensure fair usage:

How to implement caching

Reduce API calls by caching responses. Icons are cached for 24 hours by default:

// Example: Cache icons in localStorage
async function getIcon(name, source = 'lucide') {
  const cacheKey = `icon:${source}:${name}`;
  const cached = localStorage.getItem(cacheKey);
  if (cached) {
    return cached;
  }
  const response = await fetch(`https://svg-api.org/v1/icons/${name}?source=${source}`);
  const svg = await response.text();
  localStorage.setItem(cacheKey, svg);
  return svg;
}

Requesting higher limits

If you need higher rate limits for production use:

• Register for a free account to increase limits to 300 req/min
• Contact us for Pro tier access if you need 1,000+ req/min
• Consider using batch requests to fetch multiple icons in one call

Common CORS errors

You may see errors like:

• Access-Control-Allow-Origin header missing
• Request blocked by CORS policy
• Preflight request failed

How to configure your application

SVG API supports CORS for all origins. If you are experiencing issues:

• Ensure you are using the correct URL: https://svg-api.org
• For img tags, no special configuration is needed
• For fetch requests, ensure you are not sending custom headers that trigger preflight

// Correct: Simple fetch request
fetch('https://svg-api.org/v1/icons/home?source=lucide')
  .then(res => res.text())
  .then(svg => console.log(svg));
// For JSON responses, add Accept header
fetch('https://svg-api.org/v1/icons/home?source=lucide', {
  headers: { 'Accept': 'application/json' }
})
  .then(res => res.json())
  .then(data => console.log(data));

Browser compatibility

SVGs from the API work in all modern browsers. If you see issues:

• Ensure you are using an up-to-date browser (Chrome, Firefox, Safari, Edge)
• Check that your Content Security Policy allows SVG data
• Verify the SVG is being inserted correctly (not escaped as text)

CSS styling issues

If CSS styles are not applying to your SVGs:

• Use currentColor for the color parameter to inherit from CSS
• When using img tags, CSS cannot style internal SVG elements
• Inline the SVG directly in HTML for full CSS control

<!-- CSS can style this -->
<svg class="icon">...</svg>
<!-- CSS cannot style internal SVG paths -->
<img src="https://svg-api.org/v1/icons/home?source=lucide" class="icon" />
<style>
  .icon {
    color: #3b82f6; /* Works with currentColor */
    width: 24px;
    height: 24px;
  }
</style>

Size and color customization

Best practices for customizing icon appearance:

• Use the size parameter (8-512) for consistent dimensions
• URL-encode the # in hex colors as %23
• Use stroke parameter (0.5-3) to adjust line thickness

<!-- Size and color via URL parameters -->
<img src="https://svg-api.org/v1/icons/heart?source=lucide&size=32&color=%23ef4444" alt="Heart" />
<!-- Or use currentColor for CSS control -->
<img src="https://svg-api.org/v1/icons/heart?source=lucide&color=currentColor" class="text-red-500 w-8 h-8" alt="Heart" />

Can I use this commercially?

Yes. SVG API is free and open source. All icons retain their original licenses (typically MIT, ISC, or Apache 2.0). You can use them in commercial projects without attribution, though we recommend checking the specific license of the icon source you are using.

How do I report a bug?

If you encounter an issue with the API:

• Check the request ID in the response headers for reference
• Include the exact URL and parameters you used
• Describe the expected vs actual behavior
• Open an issue on our GitHub repository

How to request new features?

We welcome feature requests:

• Open a GitHub issue with the "feature request" label
• Describe your use case and why the feature would be valuable
• For new icon sources, provide a link to the library and its license
• Vote on existing feature requests to help us prioritize