Developer Guide & Icon Integration

Vector Icons for Modern Developers

Use Pixahunt SVGs just like FontAwesome, Lucide, or Heroicons. Built for seamless copy-paste into React (JSX), Vue 3, Tailwind CSS, and automated querying via our REST API.

Quick Start Guide REST API Reference Browse All Vectors (746+)

Interactive Icon Playground Live Code

Select an icon below or customize framework code ready for production.

Choose a Sample Vector Icon:

How to Use Pixahunt Icons in Your Stack

Works seamlessly like FontAwesome or Heroicons. Scale infinitely without pixelation or heavy font bundles.

⚛

React & Next.js Component

Props for size, color & custom styling

Copy any vector into a React component. Pass Tailwind utility classes through className to change icon colors and sizes dynamically. 

// components/PixahuntIcon.jsx
export function PixahuntIcon({ size = 24, className = "text-blue-500", ...props }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width={size}
      height={size}
      fill="currentColor"
      className={className}
      {...props}
    >
      {/* Paste paths from vector page */}
    </svg>
  );
}
Usage: <PixahuntIcon size={32} className="text-orange-500" />
▲

Vue 3 & Nuxt 3 Component

Single File Component with props

Create clean Single File Components (.vue) for clean maintainability in your Vue / Nuxt ecosystem. 

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="currentColor"
    :class="customClass"
  >
    <!-- Paste vector paths here -->
  </svg>
</template>

<script setup>
defineProps({
  size: { type: [Number, String], default: 24 },
  customClass: { type: String, default: 'text-gray-200' }
})
</script>
Usage: <PixahuntIcon :size="28" customClass="text-emerald-400" />
🎨

Tailwind CSS & Pure HTML

Control sizes & hover states via utility classes

Inline SVGs automatically inherit CSS color when fill="currentColor" or stroke="currentColor" is used. 

<!-- Button with vector icon -->
<button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl">
  <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
    <!-- vector paths -->
  </svg>
  <span>Click Action</span>
</button>
Change colors instantly using text-blue-500 hover:text-orange-500
⚡

Direct Image Embed & CSS Data URI

Zero build step needed

Use safe preview links in your standard <img> tags or embed SVG directly into CSS background properties. 

<!-- Standard Image Tag (Clean URL) -->
<img src="https://www.fainoor.com/svg/preview/icon-slug" alt="Icon" width="32" height="32" />

<!-- In CSS / Tailwind -->
.custom-badge::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,...");
}
Safe caching with immutable HTTP headers
RESTful Endpoints

Pixahunt SVG REST API

Programmatically query, filter, and fetch SVG vectors and metadata for apps, automation, and plugins.

GET https://www.fainoor.com/api/svgs Search & paginate active vectors

Supports query search (?q=cloud), tag filtering (?tag=minimal), and sorting (?sort=popular). 

// Example Response
{
  "success": true,
  "data": [
    {
      "id": 1366,
      "title": "Azure AI Logo SVG Icon",
      "shortname": "azure-ai-logo",
      "slug": "azure-ai-logo-1366",
      "preview_url": "https://www.fainoor.com/svg/preview/azure-ai-logo-1366",
      "download_url": "https://www.fainoor.com/svg/azure-ai-logo-1366/download",
      "tags": ["azure", "ai", "cloud", "vector"],
      "downloads": 142
    }
  ],
  "pagination": { "current_page": 1, "per_page": 24, "total": 12500 }
}
GET https://www.fainoor.com/api/svgs/{id} Fetch specific SVG asset by ID

Returns detailed vector metadata, author information, download count, and tags.

GET https://www.fainoor.com/api/svgs/trending Get top downloaded & trending vectors