Getting Started

Quick Start

Get up and running with SVG API in under 5 minutes. No signup, no API key, no dependencies.

Fetch your first icon

The simplest way to use SVG API is with a direct URL. Every icon is available at:

Terminal

https://svg-api.org/v1/icons/{name}?source={source}

Try it in your browser:

Terminal

https://svg-api.org/v1/icons/home?source=lucide

This is the Lucide home icon rendered at 48px

Use in your HTML

Add icons directly to any HTML page using an img tag:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <nav>
    <a href="/">
      <img src="https://svg-api.org/v1/icons/home?source=lucide" alt="Home" />
      Home
    </a>
    <a href="/settings">
      <img src="https://svg-api.org/v1/icons/settings?source=lucide" alt="Settings" />
      Settings
    </a>
  </nav>
</body>
</html>

Customize your icons

Use query parameters to customize size, color, and stroke width:

Terminal

# Change size (8-512px)
https://svg-api.org/v1/icons/heart?source=lucide&size=32
# Change color (hex, URL-encoded)
https://svg-api.org/v1/icons/heart?source=lucide&color=%23ef4444
# Change stroke width (0.5-3)
https://svg-api.org/v1/icons/heart?source=lucide&stroke=1.5
# Combine all options
https://svg-api.org/v1/icons/heart?source=lucide&size=48&color=%23ef4444&stroke=2

24px

32px

48px

Red

Blue

Search for icons

Use the search endpoint to find icons by name, tag, or keyword:

Terminal

curl "https://svg-api.org/v1/search?q=arrow"
# Filter by source
curl "https://svg-api.org/v1/search?q=arrow&source=lucide"
# Limit results
curl "https://svg-api.org/v1/search?q=arrow&limit=10"

The response includes icon names, sources, and relevance scores:

JSON

{
  "data": [
    {
      "name": "arrow-right",
      "source": "lucide",
      "category": "arrows",
      "score": 0.95
    },
    {
      "name": "arrow-left",
      "source": "lucide",
      "category": "arrows",
      "score": 0.93
    }
  ],
  "meta": {
    "total": 156,
    "limit": 20,
    "offset": 0
  }
}