HyLab

The Icons API for Modern Apps

18,000+ icons. One endpoint. Any color, size, or format.

---

Quick Start

# No install needed — just use the URL
curl "https://hylab.vercel.app/api/icons/home?color=7c9a82&size=32"

<!-- Drop it into any HTML -->
<img src="https://hylab.vercel.app/api/icons/home?color=7c9a82&size=32" alt="Home" />

// React component
import { HyIcon } from 'hylab-icons';

<HyIcon name="home" color="#7c9a82" size={32} />

---

Features

One API, All Icons No need to install 10 different icon packages. One endpoint serves them all.	Fully Customizable Change color, size, stroke width, and output format with simple query parameters.
SVG, PNG & WebP Get icons in any format. SVG for web, PNG for compatibility, WebP for performance.	No Authentication Free, open source, no API keys. Just make a request and get your icon.

---

API Reference

Get Icon

GET /api/icons/:name

Parameter	Type	Default	Description
name	path	—	Icon name (e.g., home, search, heart)
color	query	currentColor	Hex color without #
size	query	24	Size in pixels (1–512)
stroke	query	2	Stroke width (0.5–4)
format	query	svg	Output format: svg, png, webp

# SVG
curl "https://hylab.vercel.app/api/icons/home?color=7c9a82&size=32"

# PNG
curl "https://hylab.vercel.app/api/icons/home?format=png&size=64"

# WebP
curl "https://hylab.vercel.app/api/icons/home?format=webp&size=128"

Search Icons

GET /api/icons/search?q=arrow

List Categories

GET /api/icons/categories

List Icon Sets

GET /api/icons/sets

List Icons (Paginated)

GET /api/icons?page=1&limit=20&category=navigation

---

Code Examples

HTML

<img src="https://hylab.vercel.app/api/icons/home?color=7c9a82&size=32" alt="Home" />
<img src="https://hylab.vercel.app/api/icons/search?color=ffffff&size=24" alt="Search" />
<img src="https://hylab.vercel.app/api/icons/heart?color=ef4444&size=48&format=png" alt="Heart" />

React

import { HyIcon } from 'hylab-icons';

function App() {
  return (
    <div>
      <HyIcon name="home" color="#7c9a82" size={32} />
      <HyIcon name="search" color="#ffffff" size={24} />
      <HyIcon name="heart" color="#ef4444" size={48} format="png" />
    </div>
  );
}

Next.js

// app/icon/[name]/route.ts
import { NextResponse } from "next/server";

export async function GET(
  request: Request,
  { params }: { params: { name: string } }
) {
  const url = new URL(request.url);
  const color = url.searchParams.get("color") || "7c9a82";
  const size = url.searchParams.get("size") || "24";

  const res = await fetch(
    `https://hylab.vercel.app/api/icons/${params.name}?color=${color}&size=${size}`
  );

  return new NextResponse(await res.blob(), {
    headers: {
      "Content-Type": "image/svg+xml",
      "Cache-Control": "public, max-age=86400",
    },
  });
}

Vue

<template>
  <span v-html="svg" />
</template>

<script setup>
import { ref, onMounted, watch } from "vue";

const props = defineProps({
  name: String,
  color: { type: String, default: "7c9a82" },
  size: { type: Number, default: 24 },
});

const svg = ref("");

const loadIcon = async () => {
  const res = await fetch(
    `/api/icons/${props.name}?color=${props.color}&size=${props.size}`
  );
  svg.value = await res.text();
};

onMounted(loadIcon);
watch(() => props.name, loadIcon);
</script>

Svelte

<script>
  export let name;
  export let color = "7c9a82";
  export let size = 24;

  let svg = "";

  $: fetch(`/api/icons/${name}?color=${color}&size=${size}`)
    .then(r => r.text())
    .then(t => svg = t);
</script>

<span>{@html svg}</span>

Python

import requests

# Get SVG
res = requests.get(
    "https://hylab.vercel.app/api/icons/home",
    params={"color": "7c9a82", "size": "32"}
)
svg_content = res.text

# Get PNG
res = requests.get(
    "https://hylab.vercel.app/api/icons/home",
    params={"format": "png", "size": "64"}
)
with open("icon.png", "wb") as f:
    f.write(res.content)

# Search
res = requests.get(
    "https://hylab.vercel.app/api/icons/search",
    params={"q": "arrow"}
)
icons = res.json()["data"]

---

Icon Sources

Source	Icons	License
Tabler	5,093	MIT
Remix	3,229	Apache 2.0
Carbon	2,665	Apache 2.0
Lucide	1,582	ISC
Phosphor	1,512	MIT
Iconoir	1,383	MIT
BoxIcons	814	MIT
Octicons	733	MIT
CSS.gg	704	MIT
Heroicons	324	MIT

Total: 18,039 icons across 14 categories

---

Tech Stack

---

Getting Started (Self-Host)

# Clone
git clone https://github.com/onyxax/HyLab.git
cd icon-api

# Install
npm install

# Run
npm run dev

Open http://localhost:3000

---

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

---

License

MIT — use freely in personal and commercial projects.

---

Built by onyxax