Documentation

Everything you need to start using Iconyx icons in your projects.

CDN URL Format

Iconyx icons are served via jsDelivr — a free, fast, and reliable open-source CDN. No signup or API key needed.

https://cdn.jsdelivr.net/gh/jojin1709/iconyx@main/public/icons/{category}/{name}.svg

Live example

https://cdn.jsdelivr.net/gh/jojin1709/iconyx@main/public/icons/ui/search.svg

💡 Tip: Add @latest instead of @main to always get the latest version.

HTML Usage

Use icons as regular <img> tags anywhere in your HTML. Works in every browser and framework.

<img
  src="https://cdn.jsdelivr.net/gh/jojin1709/iconyx@main/public/icons/ui/search.svg"
  width="24"
  height="24"
  alt="Search"
/>

CSS / Background

To style SVG icon colors dynamically using CSS, load them as masks inside stylesheets:

.search-icon {
  width: 24px;
  height: 24px;
  /* Custom color properties */
  background-color: #8b5cf6;
  mask: url("https://cdn.jsdelivr.net/gh/jojin1709/iconyx@main/public/icons/ui/search.svg") no-repeat center;
  -webkit-mask: url("https://cdn.jsdelivr.net/gh/jojin1709/iconyx@main/public/icons/ui/search.svg") no-repeat center;
}

React & Next.js

Load customizable inline SVGs inside standard React or Next.js components:

import React from 'react';

export function SearchIcon({ size = 24, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2">
      <circle cx="11" cy="11" r="8" />
      <line x1="21" y1="21" x2="16.65" y2="16.65" />
    </svg>
  );
}

Next.js Image component

import Image from 'next/image';

<Image
  src="https://cdn.jsdelivr.net/gh/jojin1709/iconyx@main/public/icons/media/play.svg"
  width={24}
  height={24}
  alt="Play"
/>

⚠️ Next.js note: Add cdn.jsdelivr.net to next.config.ts images.remotePatterns for the Next.js Image component.

NPM Package Installation

Developers can install and bundle the library as a dependency locally.

npm install iconyx

Import components:

import { SearchIcon, HomeIcon } from 'iconyx';

function App() {
  return <SearchIcon size={24} color="#8b5cf6" />;
}

Build & Publish NPM

To compile your local icon manifests into standard JS modules and publish them to npm registry:

1. Compile package output (ESM, CJS, Types):

npm run build:package

2. Push modifications to the npm registry:

npm publish

Styling Tips

Since icons are stroke-based SVGs, they respond to CSS naturally.

/* Hover color shift */
img.icon { transition: filter 0.2s; }
img.icon:hover { filter: brightness(0) invert(1); }

/* Make white icon on dark bg */
img.icon-white { filter: invert(1); }

/* Spin animation */
img.icon-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

Download Icons

Prefer to self-host? You can download individual SVG files or clone the full repo.

# Download a single icon
curl https://cdn.jsdelivr.net/gh/jojin1709/iconyx@main/public/icons/ui/search.svg -o search.svg

# Clone the full repo
git clone https://github.com/jojin1709/iconyx.git

All icons are in public/icons/{category}/{name}.svg. Each file is a standard 24×24 SVG with currentColor stroke.