https://iconvault-api.pages.dev

1{
2  "success": true,
3  "message": "Welcome to IconVault API!",
4  "version": "1.0.0",
5  "developer": "Xbibz Official",
6  "endpoints": {
7    "icons": "/api/icons",
8    "icon_detail": "/api/icons/{slug}",
9    "search": "/api/icons/search?q={query}",
10    "categories": "/api/categories",
11    "stats": "/api/stats"
12  },
13  "rate_limit": {
14    "max_requests": 2000,
15    "window": "15 minutes"
16  },
17  "documentation": "Visit the website for full API documentation."
18}

1{
2  "success": true,
3  "data": {
4    "icons": [
5      {
6        "name": "Discord",
7        "slug": "Discord",
8        "category": "Social",
9        "available_variants": ["standard"],
10        "variants": {
11          "standard": {
12            "slug": "Discord",
13            "url": "https://iconvault-api.pages.dev/icons/Discord.svg",
14            "size": 1217,
15            "api_url": "https://iconvault-api.pages.dev/api/icons/Discord?variant=standard",
16            "svg_url": "https://iconvault-api.pages.dev/api/icons/Discord?variant=standard&format=svg"
17          }
18        }
19      }
20    ],
21    "pagination": {
22      "page": 1,
23      "limit": 20,
24      "total": 278,
25      "total_pages": 14,
26      "has_next": true,
27      "has_prev": false
28    }
29  },
30  "meta": {
31    "total_icons": 429,
32    "total_brands": 278,
33    "categories": ["AI & ML", "Browser", "Cloud & Hosting", "..."],
34    "timestamp": "2025-01-15T12:00:00.000Z"
35  }
36}

1{
2  "success": true,
3  "data": {
4    "name": "Discord",
5    "slug": "Discord",
6    "category": "Social",
7    "requested_variant": "standard",
8    "selected_variant": {
9      "slug": "Discord",
10      "url": "https://iconvault-api.pages.dev/icons/Discord.svg",
11      "svg_url": "https://iconvault-api.pages.dev/api/icons/Discord?variant=standard&format=svg",
12      "size": 1217
13    },
14    "available_variants": [
15      {
16        "variant": "standard",
17        "slug": "Discord",
18        "url": "https://iconvault-api.pages.dev/icons/Discord.svg",
19        "size": 1217,
20        "api_url": "https://iconvault-api.pages.dev/api/icons/Discord?variant=standard",
21        "svg_url": "https://iconvault-api.pages.dev/api/icons/Discord?variant=standard&format=svg"
22      }
23    ]
24  }
25}

1<!-- When format=svg, the response is raw SVG with Content-Type: image/svg+xml -->
2<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ...>
3  <!-- SVG path data -->
4</svg>

1{
2  "success": true,
3  "query": "docker",
4  "count": 1,
5  "data": [
6    {
7      "name": "Docker",
8      "slug": "Docker",
9      "category": "DevOps",
10      "available_variants": ["standard"],
11      "variants": {
12        "standard": {
13          "slug": "Docker",
14          "url": "https://iconvault-api.pages.dev/icons/Docker.svg",
15          "svg_url": "https://iconvault-api.pages.dev/api/icons/Docker?variant=standard&format=svg"
16        }
17      }
18    }
19  ]
20}

1{
2  "success": true,
3  "data": [
4    {
5      "name": "AI & ML",
6      "slug": "ai-ml",
7      "brand_count": 12,
8      "icon_count": 45
9    },
10    {
11      "name": "Browser",
12      "slug": "browser",
13      "brand_count": 8,
14      "icon_count": 24
15    },
16    {
17      "name": "Social",
18      "slug": "social",
19      "brand_count": 22,
20      "icon_count": 67
21    }
22  ]
23}

1{
2  "success": true,
3  "data": {
4    "total_icons": 429,
5    "total_brands": 278,
6    "total_variants": 429,
7    "categories_count": 11,
8    "categories": [
9      { "category": "AI & ML", "brands": 12, "icons": 45 },
10      { "category": "Social", "brands": 22, "icons": 67 }
11    ],
12    "version": "1.0.0",
13    "source": "XbibzModder777/icon-svg",
14    "rate_limit": {
15      "max_requests": 2000,
16      "window": "15 minutes",
17      "headers": [
18        "X-RateLimit-Limit",
19        "X-RateLimit-Remaining",
20        "X-RateLimit-Reset",
21        "X-RateLimit-Policy"
22      ]
23    }
24  }
25}

1<!-- Using direct SVG URL -->
2<img
3  src="https://iconvault-api.pages.dev/icons/Discord.svg"
4  alt="Discord"
5  width="32"
6  height="32"
7/>
8
9<!-- With fallback and loading optimization -->
10<img
11  src="https://iconvault-api.pages.dev/icons/React.svg"
12  alt="React framework logo"
13  width="48"
14  height="48"
15  loading="lazy"
16  class="icon"
17/>
18
19<!-- Using the API endpoint with format=svg -->
20<img
21  src="https://iconvault-api.pages.dev/api/icons/Docker?format=svg"
22  alt="Docker"
23  width="32"
24  height="32"
25/>

1<!-- Method 1: Direct inline SVG (copy-paste from API response) -->
2<div class="icon-container">
3  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
4    <!-- SVG content from /api/icons/Discord?format=svg -->
5  </svg>
6</div>
7
8<!-- Method 2: Fetch SVG via JavaScript and inject -->
9<div id="icon-container"></div>
10
11<script>
12  async function loadIcon(slug, container) {
13    const response = await fetch(
14      'https://iconvault-api.pages.dev/api/icons/' + slug + '?format=svg'
15    );
16    const svgText = await response.text();
17    container.innerHTML = svgText;
18  }
19
20  loadIcon('Discord', document.getElementById('icon-container'));
21</script>
22
23<!-- Style inline SVGs with CSS -->
24<style>
25  .icon-container svg {
26    width: 32px;
27    height: 32px;
28    fill: currentColor; /* Inherits text color */
29    transition: fill 0.2s;
30  }
31  .icon-container:hover svg {
32    fill: #f97316; /* Orange on hover */
33  }
34</style>

1/* Using SVG as CSS background */
2.icon-discord {
3  width: 32px;
4  height: 32px;
5  background-image: url('https://iconvault-api.pages.dev/icons/Discord.svg');
6  background-size: contain;
7  background-repeat: no-repeat;
8  background-position: center;
9}
10
11/* With pseudo-element */
12.tech-stack li::before {
13  content: '';
14  display: inline-block;
15  width: 20px;
16  height: 20px;
17  margin-right: 8px;
18  background-size: contain;
19  background-repeat: no-repeat;
20  vertical-align: middle;
21}
22
23.tech-stack li.react::before {
24  background-image: url('https://iconvault-api.pages.dev/icons/React.svg');
25}
26
27.tech-stack li.docker::before {
28  background-image: url('https://iconvault-api.pages.dev/icons/Docker.svg');
29}
30
31/* Using with mask for color control */
32.adaptive-icon {
33  width: 32px;
34  height: 32px;
35  background-color: currentColor;
36  -webkit-mask-image: url('https://iconvault-api.pages.dev/icons/Discord.svg');
37  mask-image: url('https://iconvault-api.pages.dev/icons/Discord.svg');
38  -webkit-mask-size: contain;
39  mask-size: contain;
40  -webkit-mask-repeat: no-repeat;
41  mask-repeat: no-repeat;
42}

1<!-- Using <object> tag -->
2<object
3  type="image/svg+xml"
4  data="https://iconvault-api.pages.dev/icons/React.svg"
5  width="32"
6  height="32"
7  aria-label="React logo"
8>
9  <!-- Fallback for unsupported browsers -->
10  <img src="https://iconvault-api.pages.dev/icons/React.svg" alt="React" />
11</object>
12
13<!-- Using <embed> tag -->
14<embed
15  type="image/svg+xml"
16  src="https://iconvault-api.pages.dev/icons/Docker.svg"
17  width="32"
18  height="32"
19/>

1import { useState, useEffect } from 'react';
2
3interface IconProps {
4  slug: string;
5  variant?: string;
6  size?: number;
7  className?: string;
8}
9
10// Cache for SVG content
11const svgCache = new Map();
12
13export function IconVaultIcon({ slug, variant = 'standard', size = 24, className = '' }: IconProps) {
14  const [svg, setSvg] = useState(null);
15  const [loading, setLoading] = useState(true);
16  const [error, setError] = useState(false);
17
18  const cacheKey = slug + '-' + variant;
19
20  useEffect(() => {
21    if (svgCache.has(cacheKey)) {
22      setSvg(svgCache.get(cacheKey));
23      setLoading(false);
24      return;
25    }
26
27    setLoading(true);
28    setError(false);
29
30    fetch('https://iconvault-api.pages.dev/api/icons/' + slug + '?variant=' + variant + '&format=svg')
31      .then(res => {
32        if (!res.ok) throw new Error('Icon not found');
33        return res.text();
34      })
35      .then(svgText => {
36        svgCache.set(cacheKey, svgText);
37        setSvg(svgText);
38      })
39      .catch(() => setError(true))
40      .finally(() => setLoading(false));
41  }, [slug, variant, cacheKey]);
42
43  if (loading) {
44    return <div style={{ width: size, height: size }} className={"animate-pulse bg-muted rounded " + className} />;
45  }
46  if (error) {
47    return <div style={{ width: size, height: size }} className={"bg-destructive/10 rounded " + className} />;
48  }
49  if (!svg) return null;
50
51  return (
52    <div
53      className={"icon-vault " + className}
54      style={{ width: size, height: size }}
55      dangerouslySetInnerHTML={{ __html: svg }}
56      aria-label={slug + ' icon'}
57      role="img"
58    />
59  );
60}
61
62// Usage:
63// <IconVaultIcon slug="Discord" size={32} />
64// <IconVaultIcon slug="React" variant="dark" />

1// Custom hook for icon search
2import { useState, useEffect } from 'react';
3
4export function useIconSearch(query, debounceMs = 300) {
5  const [results, setResults] = useState([]);
6  const [loading, setLoading] = useState(false);
7
8  useEffect(() => {
9    if (!query || query.length < 2) {
10      setResults([]);
11      return;
12    }
13
14    const timer = setTimeout(async () => {
15      setLoading(true);
16      try {
17        const res = await fetch(
18          'https://iconvault-api.pages.dev/api/icons/search?q=' + encodeURIComponent(query)
19        );
20        const data = await res.json();
21        setResults(data.data || []);
22      } catch {
23        setResults([]);
24      } finally {
25        setLoading(false);
26      }
27    }, debounceMs);
28
29    return () => clearTimeout(timer);
30  }, [query, debounceMs]);
31
32  return { results, loading };
33}

1// Server Component (Next.js App Router)
2async function getIconSvg(slug, variant = 'standard') {
3  try {
4    const res = await fetch(
5      'https://iconvault-api.pages.dev/api/icons/' + slug + '?variant=' + variant + '&format=svg',
6      { next: { revalidate: 86400 } } // Cache for 24 hours
7    );
8    if (!res.ok) return null;
9    return res.text();
10  } catch {
11    return null;
12  }
13}
14
15// Server Component
16export async function ServerIcon({ slug, variant, size = 24, className }) {
17  const svg = await getIconSvg(slug, variant);
18  if (!svg) return <div style={{ width: size, height: size }} className="bg-muted rounded" />;
19
20  return (
21    <div
22      style={{ width: size, height: size }}
23      className={className}
24      dangerouslySetInnerHTML={{ __html: svg }}
25      role="img"
26      aria-label={slug + ' icon'}
27    />
28  );
29}
30
31// Usage in a page:
32// import { ServerIcon } from '@/components/ServerIcon';
33// export default function Page() {
34//   return <ServerIcon slug="Discord" size={48} />;
35// }

1<script setup>
2import { ref, watch, onMounted } from 'vue'
3
4const props = defineProps({
5  slug: { type: String, required: true },
6  variant: { type: String, default: 'standard' },
7  size: { type: Number, default: 24 }
8})
9
10const svg = ref(null)
11const loading = ref(true)
12const error = ref(false)
13
14const cache = new Map()
15
16async function fetchIcon() {
17  const key = props.slug + '-' + props.variant
18  if (cache.has(key)) {
19    svg.value = cache.get(key)
20    loading.value = false
21    return
22  }
23
24  loading.value = true
25  error.value = false
26
27  try {
28    const res = await fetch(
29      'https://iconvault-api.pages.dev/api/icons/' + props.slug + '?variant=' + props.variant + '&format=svg'
30    )
31    if (!res.ok) throw new Error('Not found')
32    const text = await res.text()
33    cache.set(key, text)
34    svg.value = text
35  } catch {
36    error.value = true
37  } finally {
38    loading.value = false
39  }
40}
41
42onMounted(fetchIcon)
43watch(() => [props.slug, props.variant], fetchIcon)
44</script>
45
46<template>
47  <div
48    v-if="svg && !loading && !error"
49    :style="{ width: size + 'px', height: size + 'px' }"
50    v-html="svg"
51    role="img"
52    :aria-label="slug + ' icon'"
53  />
54  <div v-else-if="loading" :style="{ width: size + 'px', height: size + 'px' }" class="animate-pulse bg-muted rounded" />
55</template>
56
57<!-- Usage: <IconVaultIcon slug="Discord" :size="32" -->

1<script>
2  import { onMount } from 'svelte';
3
4  export let slug = '';
5  export let variant = 'standard';
6  export let size = 24;
7
8  let svg = '';
9  let loading = true;
10  let error = false;
11
12  const cache = new Map();
13
14  async function fetchIcon() {
15    const key = slug + '-' + variant;
16    if (cache.has(key)) {
17      svg = cache.get(key);
18      loading = false;
19      return;
20    }
21
22    loading = true;
23    error = false;
24
25    try {
26      const res = await fetch(
27        'https://iconvault-api.pages.dev/api/icons/' + slug + '?variant=' + variant + '&format=svg'
28      );
29      if (!res.ok) throw new Error('Not found');
30      const text = await res.text();
31      cache.set(key, text);
32      svg = text;
33    } catch {
34      error = true;
35    } finally {
36      loading = false;
37    }
38  }
39
40  onMount(fetchIcon);
41  $: if (slug || variant) fetchIcon();
42</script>
43
44{#if loading}
45  <div class="icon-loading" style="width: {size}px; height: {size}px;"></div>
46{:else if error}
47  <div class="icon-error" style="width: {size}px; height: {size}px;"></div>
48{:else}
49  <div
50    class="icon-vault"
51    style="width: {size}px; height: {size}px;"
52    {@html svg}
53    role="img"
54    aria-label="{slug} icon"
55  ></div>
56{/if}

1import { Injectable } from '@angular/core';
2import { HttpClient } from '@angular/common/http';
3import { Observable, of } from 'rxjs';
4import { map, shareReplay, catchError } from 'rxjs/operators';
5
6@Injectable({ providedIn: 'root' })
7export class IconVaultService {
8  private baseUrl = 'https://iconvault-api.pages.dev/api';
9  private svgCache = new Map();
10
11  constructor(private http: HttpClient) {}
12
13  getIconSvg(slug, variant = 'standard'): Observable<string> {
14    const key = slug + '-' + variant;
15    if (this.svgCache.has(key)) {
16      return this.svgCache.get(key);
17    }
18
19    const svg$ = this.http.get(
20      this.baseUrl + '/icons/' + slug + '?variant=' + variant + '&format=svg',
21      { responseType: 'text' }
22    ).pipe(
23      catchError(() => of('')),
24      shareReplay(1)
25    );
26
27    this.svgCache.set(key, svg$);
28    return svg$;
29  }
30
31  searchIcons(query: string): Observable<any> {
32    return this.http.get(this.baseUrl + '/icons/search?q=' + encodeURIComponent(query));
33  }
34}

1// IconVault - Lightweight vanilla JS client
2const IconVault = {
3  baseUrl: 'https://iconvault-api.pages.dev/api',
4  cache: new Map(),
5  cacheExpiry: 24 * 60 * 60 * 1000, // 24 hours
6
7  async getIcon(slug, variant = 'standard') {
8    const key = slug + '-' + variant;
9    const cached = this.cache.get(key);
10
11    if (cached && Date.now() - cached.timestamp < this.cacheExpiry) {
12      return cached.svg;
13    }
14
15    const res = await fetch(this.baseUrl + '/icons/' + slug + '?variant=' + variant + '&format=svg');
16    if (!res.ok) throw new Error('Icon "' + slug + '" not found');
17
18    const svg = await res.text();
19    this.cache.set(key, { svg, timestamp: Date.now() });
20    return svg;
21  },
22
23  async renderIcon(container, slug, options = {}) {
24    const { variant = 'standard', size = 24 } = options;
25    try {
26      const svg = await this.getIcon(slug, variant);
27      container.innerHTML = svg;
28      const svgEl = container.querySelector('svg');
29      if (svgEl) {
30        svgEl.setAttribute('width', size);
31        svgEl.setAttribute('height', size);
32        svgEl.setAttribute('role', 'img');
33        svgEl.setAttribute('aria-label', slug + ' icon');
34      }
35    } catch (err) {
36      console.error('Failed to load icon ' + slug + ':', err);
37    }
38  },
39
40  async search(query) {
41    const res = await fetch(this.baseUrl + '/icons/search?q=' + encodeURIComponent(query));
42    return res.json();
43  }
44};
45
46// Usage:
47// IconVault.renderIcon(document.getElementById('icon'), 'Discord', { size: 32 });
48// const results = await IconVault.search('react');

1// Check your rate limit status from response headers
2const response = await fetch('https://iconvault-api.pages.dev/api/icons?limit=5');
3
4console.log('Limit:', response.headers.get('X-RateLimit-Limit'));
5console.log('Remaining:', response.headers.get('X-RateLimit-Remaining'));
6console.log('Resets at:', response.headers.get('X-RateLimit-Reset'));
7console.log('Policy:', response.headers.get('X-RateLimit-Policy'));

1# Request standard variant (default)
2curl "https://iconvault-api.pages.dev/api/icons/Discord"
3
4# Request dark variant
5curl "https://iconvault-api.pages.dev/api/icons/Anthropic?variant=dark"
6
7# Request wordmark variant as raw SVG
8curl "https://iconvault-api.pages.dev/api/icons/Claude_AI?variant=wordmark_dark&format=svg"
9
10# Filter icons list to only those with dark variants
11curl "https://iconvault-api.pages.dev/api/icons?variant=dark"

1interface IconVaultConfig {
2  baseUrl?: string;
3  timeout?: number;
4  cacheTTL?: number;
5}
6
7interface PaginationParams {
8  page?: number;
9  limit?: number;
10}
11
12interface IconListParams extends PaginationParams {
13  category?: string;
14  variant?: string;
15  search?: string;
16}
17
18class IconVaultSDK {
19  private baseUrl: string;
20  private timeout: number;
21  private cacheTTL: number;
22  private cache: Map<string, { data: any; timestamp: number }>;
23
24  constructor(config: IconVaultConfig = {}) {
25    this.baseUrl = config.baseUrl || 'https://iconvault-api.pages.dev/api';
26    this.timeout = config.timeout || 10000;
27    this.cacheTTL = config.cacheTTL || 86400000; // 24 hours
28    this.cache = new Map();
29  }
30
31  private async request<T>(endpoint: string, useCache = true): Promise<T> {
32    const url = this.baseUrl + endpoint;
33    const cacheKey = url;
34
35    // Check cache
36    if (useCache) {
37      const cached = this.cache.get(cacheKey);
38      if (cached && Date.now() - cached.timestamp < this.cacheTTL) {
39        return cached.data as T;
40      }
41    }
42
43    const controller = new AbortController();
44    const timeoutId = setTimeout(() => controller.abort(), this.timeout);
45
46    try {
47      const res = await fetch(url, { signal: controller.signal });
48
49      if (!res.ok) {
50        const error = await res.json().catch(() => ({ message: 'Request failed' }));
51        throw new Error('[' + res.status + '] ' + (error.message || error.error));
52      }
53
54      const data = await res.json();
55
56      // Cache the response
57      if (useCache) {
58        this.cache.set(cacheKey, { data, timestamp: Date.now() });
59      }
60
61      return data as T;
62    } finally {
63      clearTimeout(timeoutId);
64    }
65  }
66
67  async getRoot() {
68    return this.request<{ success: boolean; message: string }>('');
69  }
70
71  async getIcons(params: IconListParams = {}) {
72    const query = new URLSearchParams(
73      Object.entries(params).filter(([_, v]) => v != null).map(([k, v]) => [k, String(v)])
74    ).toString();
75    return this.request('/icons?' + query);
76  }
77
78  async getIcon(slug: string, variant = 'standard') {
79    return this.request('/icons/' + slug + '?variant=' + variant);
80  }
81
82  async getIconSvg(slug: string, variant = 'standard') {
83    const url = this.baseUrl + '/icons/' + slug + '?variant=' + variant + '&format=svg';
84    const res = await fetch(url);
85    if (!res.ok) throw new Error('Failed to fetch SVG');
86    return res.text();
87  }
88
89  async searchIcons(query: string) {
90    return this.request('/icons/search?q=' + encodeURIComponent(query));
91  }
92
93  async getCategories() {
94    return this.request('/categories');
95  }
96
97  async getStats() {
98    return this.request('/stats');
99  }
100
101  clearCache() {
102    this.cache.clear();
103  }
104}
105
106// Usage:
107// const vault = new IconVaultSDK();
108// const icons = await vault.getIcons({ category: 'Social', limit: 10 });
109// const svg = await vault.getIconSvg('Discord');
110// const results = await vault.searchIcons('react');