icon-craft

v1.0.0

Published

11 hours ago

A modern icon font inspired by Feather and Remix Icons

0High
0Medium
0Low

codecafe247

Icon-Craft 🎨⚡

A modern, developer-friendly icon library unifying the simplicity of Feather Icons with the richness of Remix Icons

🚀 Quick Start · 📖 Documentation · 🎨 Icon Browser · ⚛️ React Package

🌟 Overview

Icon-Craft combines 3000+ carefully curated icons from two of the most popular icon libraries into a single, unified icon font. Whether you're building dashboards, websites, admin panels, or web apps, Icon-Craft provides everything you need in one lightweight package.

Why Icon-Craft?

🎨 Unified Design Language - Consistent visual style across all 3000+ icons
🚀 Multiple Integration Options - CDN, npm, React components, or direct download
⚡ Lightning Fast - Optimized font files loaded via global CDN
📦 Zero Dependencies - Just include the CSS and start using icons
🎯 Developer Friendly - Simple class-based syntax: 
🌐 Framework Agnostic - Works with React, Vue, Angular, Svelte, or vanilla HTML

✨ Features

| Feature | Description | |---------|-------------| | 3000+ Icons | Carefully curated from Feather Icons & Remix Icon | | Icon Font | WOFF2, WOFF, and TTF formats for maximum compatibility | | CDN Ready | Powered by jsDelivr - globally distributed & fast | | Lightweight | Optimized font files for minimal load time | | Simple Usage | Class-based:  | | Variants | Base, fill (-fill), and line (-line) styles | | Customizable | Size, color, rotation, opacity - all via CSS | | React Components | Official TypeScript-enabled package available | | Retina Ready | Crisp rendering on all screen resolutions | | MIT Licensed | Free for personal and commercial use |

🚀 Quick Start

CDN (Recommended)

The fastest way to get started. Just add one line to your HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PATEL-KRISH-0/icon-craft@main/style.css">
</head>
<body>
  <!-- Use icons anywhere -->
  <i class="ico-home"></i>
  <i class="ico-heart"></i>
  <i class="ico-search"></i>
</body>
</html>

NPM

Install via npm for local hosting:

npm install icon-craft

Then import in your project:

// Import the CSS
import 'icon-craft/style.css';

<!-- Use icons in your components -->
<i class="ico-home"></i>

Download

Download the latest release
Extract and copy style.css and fonts/ folder to your project
Link the CSS file:

<link rel="stylesheet" href="path/to/style.css">

📖 Documentation

Basic Usage

Icons use a simple class-based syntax with the ico- prefix:

<!-- Basic icons -->
<i class="ico-home"></i>
<i class="ico-heart"></i>
<i class="ico-search"></i>
<i class="ico-star"></i>

<!-- Fill variants (solid) -->
<i class="ico-play-fill"></i>
<i class="ico-settings-fill"></i>
<i class="ico-user-fill"></i>

<!-- Line variants (outline) -->
<i class="ico-heart-line"></i>
<i class="ico-star-line"></i>
<i class="ico-bell-line"></i>

Icon Naming Convention

| Pattern | Description | Examples | |---------|-------------|----------| | ico-{name} | Base icon | ico-home, ico-heart, ico-search | | ico-{name}-fill | Filled/solid variant | ico-star-fill, ico-heart-fill | | ico-{name}-line | Outline/line variant | ico-star-line, ico-bell-line |

Customization

Size

<style>
  .small-icon { font-size: 16px; }
  .medium-icon { font-size: 24px; }
  .large-icon { font-size: 48px; }
</style>

<i class="ico-home small-icon"></i>
<i class="ico-heart medium-icon"></i>
<i class="ico-star large-icon"></i>

Color

<style>
  .red-icon { color: #ff0000; }
  .blue-icon { color: #0066cc; }
  .gold-icon { color: gold; }
</style>

<i class="ico-heart red-icon"></i>
<i class="ico-star gold-icon"></i>

Rotation & Animation

<style>
  .rotate-90 { transform: rotate(90deg); }
  .spin { animation: spin 1s linear infinite; }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

<i class="ico-arrow-right rotate-90"></i>
<i class="ico-loader spin"></i>

With Buttons

<style>
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: #007bff;
    color: white;
    cursor: pointer;
    font-size: 16px;
  }
  
  .btn i {
    font-size: 18px;
  }
</style>

<button class="btn">
  <i class="ico-download"></i>
  Download
</button>

🎨 Icon Categories

Popular Icons

| Category | Icons | |----------|-------| | UI/Navigation | home, menu, settings, grid, layout, dashboard, sidebar | | Arrows | arrow-left, arrow-right, arrow-up, arrow-down, chevron-* | | Actions | search, download, upload, edit, trash, save, copy, share | | Media | play, pause, stop, music, video, volume, mic, camera | | Communication | mail, message, chat, phone, send, notification | | Social | github, twitter, facebook, instagram, linkedin, youtube | | User | user, users, account, profile, avatar, team, group | | Files | file, folder, document, save, upload, download, cloud | | Status | check, close, alert, info, warning, error, success | | Commerce | shopping-cart, bag, basket, credit-card, dollar, tag |

📝 Note: Visit our Icon Browser to explore all 3000+ icons with live preview, search, and copy functionality.

💻 Framework Integration

React (CSS Approach)

import 'icon-craft/style.css';

function App() {
  return (
    <div>
      <i className="ico-home"></i>
      <button>
        <i className="ico-download"></i>
        Download
      </button>
    </div>
  );
}

React (Component Approach) ⭐

For a better developer experience with React, use our official @icon-craft/react package:

npm install @icon-craft/react

import { IcoHome, IcoHeart, Ico } from '@icon-craft/react';

function App() {
  return (
    <div>
      <IcoHome size={24} />
      <IcoHeart size={32} color="red" />
      <Ico name="IcoSearch" size={24} />
    </div>
  );
}

📘 View React Package Documentation →

Vue

<script setup>
import 'icon-craft/style.css';
</script>

<template>
  <i class="ico-home"></i>
  <button>
    <i class="ico-settings"></i>
    Settings
  </button>
</template>

Angular

// angular.json
{
  "styles": [
    "node_modules/icon-craft/style.css"
  ]
}

<!-- component.html -->
<i class="ico-home"></i>
<button>
  <i class="ico-download"></i>
  Download
</button>

Svelte

<script>
  import 'icon-craft/style.css';
</script>

<i class="ico-star"></i>
<button>
  <i class="ico-settings"></i>
  Settings
</button>

📦 Available Packages

| Package | Description | Install | Documentation | |---------|-------------|---------|---------------| | icon-craft | CSS icon font (this package) | npm install icon-craft | View README | | @icon-craft/react | React components with TypeScript | npm install @icon-craft/react | View README |

Quick Comparison

| Feature | icon-craft | @icon-craft/react | |---------|-----------|-------------------| | Type | Icon Font (CSS) | React Components | | TypeScript | No | ✅ Full support | | Tree-shaking | No | ✅ Yes | | Bundle Size | ~150KB (full font) | 2-5KB per icon | | Usage |  | <IcoHome /> | | Customization | CSS | Props (size, color, etc.) | | Best For | HTML/CSS projects | React/TypeScript projects |

📘 TypeScript Support

While the icon font package itself is CSS-based, our @icon-craft/react package provides full TypeScript support with complete type definitions.

Type-Safe Icon Names

import type { IconName } from '@icon-craft/react';

// IconName is a union type of all 3000+ icon names
const icon: IconName = 'home';           // ✅ Valid
const invalid: IconName = 'not-exist';   // ❌ TypeScript error

Available Types

// Core types available in @icon-craft/react
import {
  IconName,            // Union of all icon names
  IcoProps,           // Props for <Ico> component
  IconComponentProps, // Props for individual icons
  IconMetadata,       // Icon metadata structure
  IconStyle,          // 'outline' | 'filled' | 'duotone'
  IconCategory        // Icon category names
} from '@icon-craft/react';

Type-Safe Usage

import { Ico, IcoHome, IconName } from '@icon-craft/react';

// Dynamic icon with type safety
function DynamicIcon({ name }: { name: IconName }) {
  return <Ico name={name} size={24} />;
}

// Will autocomplete all 3000+ icon names
<DynamicIcon name="home" />     // ✅
<DynamicIcon name="heart" />    // ✅
<DynamicIcon name="invalid" />  // ❌ TypeScript error

For complete TypeScript documentation, see the @icon-craft/react package.

🌐 Browser Support

| Browser | Version | Support | |---------|---------|---------| | Chrome | Latest | ✅ Full support | | Firefox | Latest | ✅ Full support | | Safari | Latest | ✅ Full support | | Edge | Latest | ✅ Full support | | Opera | Latest | ✅ Full support | | IE | 11+ | ⚠️ WOFF support only |

Requirements:

Modern browsers with WOFF2 support (recommended)
WOFF fallback for older browsers
TTF fallback for legacy browsers

🚀 Performance

WOFF2 Format: ~50% smaller than TTF (150KB vs 300KB)
CDN Delivery: Global edge network with 99.9% uptime
Font Display: block - prevents FOIT (Flash of Invisible Text)
Optimized Rendering: Antialiasing enabled for crisp display
Zero JavaScript: Pure CSS solution, no runtime overhead

📚 Examples

Dashboard Navigation

<aside class="sidebar">
  <nav>
    <a href="#dashboard">
      <i class="ico-dashboard-fill"></i>
      Dashboard
    </a>
    <a href="#users">
      <i class="ico-group-fill"></i>
      Users
    </a>
    <a href="#analytics">
      <i class="ico-bar-chart-fill"></i>
      Analytics
    </a>
    <a href="#settings">
      <i class="ico-settings-fill"></i>
      Settings
    </a>
  </nav>
</aside>

Action Buttons

<div class="actions">
  <button class="btn-primary">
    <i class="ico-download-fill"></i>
    Download
  </button>
  <button class="btn-secondary">
    <i class="ico-share-fill"></i>
    Share
  </button>
  <button class="btn-danger">
    <i class="ico-delete-bin-fill"></i>
    Delete
  </button>
</div>

Status Indicators

<style>
  .status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
  }
  .status-success { background: #d1fae5; color: #047857; }
  .status-warning { background: #fef3c7; color: #92400e; }
  .status-error { background: #fee2e2; color: #991b1b; }
</style>

<div class="status status-success">
  <i class="ico-checkbox-circle-fill"></i>
  Connected
</div>
<div class="status status-warning">
  <i class="ico-alert-fill"></i>
  Warning
</div>
<div class="status status-error">
  <i class="ico-close-circle-fill"></i>
  Error
</div>

🗂️ Project Structure

icon-craft/
├── fonts/
│   ├── iconcraft.woff2    # Modern browsers (recommended)
│   ├── iconcraft.woff     # Older browser support  
│   └── iconcraft.ttf      # Legacy support
├── style.css              # Main stylesheet
├── package.json           # Package metadata
├── LICENSE                # MIT License
└── README.md              # This file

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

How to Contribute

Fork the repository
Clone your fork: git clone https://github.com/YOUR_USERNAME/icon-craft.git
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes and test them
Commit: git commit -m 'Add amazing feature'
Push: git push origin feature/amazing-feature
Open a Pull Request

Development Setup

# Clone the repo
git clone https://github.com/PATEL-KRISH-0/icon-craft.git
cd icon-craft

# Install dependencies (if any)
npm install

# Make your changes to style.css or font files

# Test locally
# Open index.html in your browser

Contribution Guidelines

Follow existing code style and conventions
Test your changes across different browsers
Update documentation if needed
Keep commits atomic and well-described
Be respectful and constructive in discussions

🔗 Related Projects

Official Packages

📦 icon-craft - CSS icon font (this package)
⚛️ @icon-craft/react - React components with TypeScript

Website & Tools

🌐 Icon Browser - Search, preview, and copy icons
🎨 Icon Editor - Customize and export icons
📖 Documentation - Complete guides and API reference

❓ FAQ

How do I find the right icon class name?

Browse the Icon Browser for visual search
Search in style.css for available icons
Use pattern: ico- + icon name (e.g., ico-home, ico-star-fill)

Can I use this in commercial projects?

Yes! Icon-Craft is licensed under MIT, which allows:

✅ Commercial use
✅ Modification
✅ Distribution
✅ Private use

How do I report bugs or request features?

What's the difference between `-fill` and `-line` icons?

-fill: Solid/filled version (e.g., ico-heart-fill)
-line: Outline/stroke version (e.g., ico-heart-line)
Base (no suffix): May be either style depending on the icon

How is this different from Font Awesome?

| Feature | Icon-Craft | Font Awesome | |---------|-----------|--------------| | Icons | 3000+ (Feather + Remix) | 2000+ free / 16000+ pro | | License | MIT (free forever) | SIL OFL / Pro license | | Design | Modern, unified | Classic, varied | | Size | ~150KB | ~200KB+ | | React Package | Full TypeScript support | Basic React wrapper | | Cost | Free | Free / Paid Pro |

Can I use this with Next.js?

Absolutely! Icon-Craft works perfectly with Next.js:

// pages/_app.js
import 'icon-craft/style.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

For better Next.js integration, consider using @icon-craft/react:

import { IcoHome } from '@icon-craft/react';

export default function Page() {
  return <IcoHome size={24} />;
}

📜 License & Attribution

License

Icon-Craft is licensed under the MIT License. See LICENSE for full details.

MIT License

Copyright (c) 2026 Krish Patel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...

Icon Sources

This project unifies icons from two excellent open-source libraries:

Feather Icons — MIT License

Source: https://feathericons.com
Repository: https://github.com/feathericons/feather
License: MIT License
Note: Icons have been converted to font format and unified with Remix icons

Remix Icon — Apache License 2.0

Source: https://remixicon.com
Repository: https://github.com/Remix-Design/RemixIcon
License: Apache License 2.0
Note: Icons have been converted to font format and unified with Feather icons

Both licenses explicitly permit modification, redistribution, and commercial use. Icon-Craft respects and acknowledges these original projects.

Legal Compliance

✅ MIT + Apache 2.0 are fully compatible
✅ Proper attribution provided
✅ No license violations
✅ Icons transformed, not redistributed verbatim

👨‍💻 Author

Krish Patel

🐙 GitHub: @PATEL-KRISH-0
💼 LinkedIn: patelkrish0
📧 Email: Contact via GitHub
☕ Support: Buy me a coffee

🌟 Show Your Support

If Icon-Craft helps your project, please consider:

⭐ Star this repository on GitHub
🐦 Share on social media (Twitter, LinkedIn)
🤝 Contribute to the project
☕ Buy me a coffee to support development
💬 Join discussions on GitHub Discussions

📊 Project Stats

Total Icons:      3000+
Icon Styles:      Fill, Line, Base
Font Formats:     WOFF2, WOFF, TTF
CDN:             jsDelivr
License:         MIT
NPM Packages:    2 (@icon-craft/react, icon-craft)
Categories:      20+
Contributors:    Open for contributions!

📝 Changelog

v1.0.0 (January 30, 2026)

🎉 Initial Release

✨ 3000+ icons from Feather Icons + Remix Icon
🌐 jsDelivr CDN support
📦 Multiple font formats (WOFF2, WOFF, TTF)
⚛️ React package published (@icon-craft/react)
🎨 Interactive icon browser website
📖 Complete documentation
🚀 npm package published

Made with ❤️ by Krish Patel

If you find Icon-Craft useful, please give it a ⭐️ on GitHub!

icon-craft · @icon-craft/react · GitHub · Website