Code Examples

<!-- Basic usage -->
<img src="https://svg-api.org/v1/icons/home?source=lucide" alt="Home" />
<!-- With custom size -->
<img src="https://svg-api.org/v1/icons/settings?source=lucide&size=32" alt="Settings" />
<!-- With custom color (URL-encode # as %23) -->
<img src="https://svg-api.org/v1/icons/heart?source=lucide&color=%23ef4444" alt="Heart" />

<nav class="nav">
  <a href="/" class="nav-link">
    <img src="https://svg-api.org/v1/icons/home?source=lucide&size=20" alt="" />
    <span>Home</span>
  </a>
  <a href="/search" class="nav-link">
    <img src="https://svg-api.org/v1/icons/search?source=lucide&size=20" alt="" />
    <span>Search</span>
  </a>
  <a href="/settings" class="nav-link">
    <img src="https://svg-api.org/v1/icons/settings?source=lucide&size=20" alt="" />
    <span>Settings</span>
  </a>
</nav>
<style>
  .nav { display: flex; gap: 1rem; }
  .nav-link { display: flex; align-items: center; gap: 0.5rem; }
  .nav-link img { width: 20px; height: 20px; }
</style>

<!-- Icon button -->
<button class="btn">
  <img src="https://svg-api.org/v1/icons/plus?source=lucide&size=16" alt="" />
  Add Item
</button>
<!-- Icon-only button -->
<button class="icon-btn" aria-label="Close">
  <img src="https://svg-api.org/v1/icons/x?source=lucide&size=24" alt="" />
</button>
<!-- Button with loading state -->
<button class="btn" disabled>
  <img src="https://svg-api.org/v1/icons/loader-2?source=lucide&size=16" class="animate-spin" alt="" />
  Loading...
</button>