@phyoofficial/phyo-icon-library

v1.0.8

Published

a month ago

A comprehensive React icon library with beautiful SVG icons

0High
0Medium
0Low

phyoofficial

react icons svg components icon-library ui remix-icon

🎨 Phyo Icon Library

A comprehensive React icon library with 3,136 beautiful, high-quality SVG icons

Perfect for React, Next.js, Vite, and modern web applications

Installation • Usage • Icons • Examples • Documentation

✨ Features

🎯 3,136 Icons - Comprehensive collection across 19 categories
📦 Tree-shakeable - Only bundle the icons you actually use
🎨 Fully Customizable - Control size, color, stroke, and all SVG properties
💪 TypeScript Support - Complete type definitions with IntelliSense
⚡ Lightweight - Optimized with React.memo for performance
🔧 Framework Ready - Works with React, Next.js 13+ (App Router), Vite, CRA
🌐 SSR Compatible - Full server-side rendering support
📱 Responsive - Perfect for mobile, tablet, and desktop
🎭 "use client" - Next.js App Router ready out of the box
🚀 Zero Config - Import and use, no setup required

📦 Installation

npm install @phyoofficial/phyo-icon-library

# Yarn
yarn add @phyoofficial/phyo-icon-library

# PNPM
pnpm add @phyoofficial/phyo-icon-library

# Bun
bun add @phyoofficial/phyo-icon-library

🚀 Quick Start

Basic Usage

import React from 'react';
import { ArrowDownBoxFill, HeartFill, StarFill } from '@phyoofficial/phyo-icon-library';

function App() {
  return (
    <div>
      <ArrowDownBoxFill width={24} height={24} />
      <HeartFill width={24} height={24} fill="red" />
      <StarFill width={24} height={24} color="blue" />
    </div>
  );
}

export default App;

With TypeScript

import React from 'react';
import { ArrowDownBoxFill, IconProps } from '@phyoofficial/phyo-icon-library';

const MyComponent: React.FC = () => {
  const iconProps: IconProps = {
    width: 24,
    height: 24,
    className: 'my-icon',
    fill: 'currentColor'
  };
  
  return <ArrowDownBoxFill {...iconProps} />;
};

export default MyComponent;

Next.js 13+ App Router

// app/page.tsx (Server Component - works out of the box!)
import { ArrowDownBoxFill, HeartFill } from '@phyoofficial/phyo-icon-library';

export default function Home() {
  return (
    <div className="p-8">
      <h1>Welcome</h1>
      <ArrowDownBoxFill className="w-6 h-6" />
      <HeartFill className="w-6 h-6 text-red-500" />
    </div>
  );
}

// app/components/ClientButton.tsx (Client Component)
'use client';

import { HeartFill } from '@phyoofficial/phyo-icon-library';
import { useState } from 'react';

export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  
  return (
    <button onClick={() => setLiked(!liked)}>
      <HeartFill 
        className="w-6 h-6"
        fill={liked ? 'red' : 'gray'}
      />
    </button>
  );
}

🎨 Customization

Size

// Using width and height
<ArrowDownBoxFill width={16} height={16} />
<ArrowDownBoxFill width={24} height={24} />
<ArrowDownBoxFill width={32} height={32} />
<ArrowDownBoxFill width={48} height={48} />

// Using className (with Tailwind)
<ArrowDownBoxFill className="w-4 h-4" />
<ArrowDownBoxFill className="w-6 h-6" />
<ArrowDownBoxFill className="w-8 h-8" />
<ArrowDownBoxFill className="w-12 h-12" />

Color

// Using fill prop
<HeartFill fill="red" />
<HeartFill fill="#3B82F6" />
<HeartFill fill="rgb(59, 130, 246)" />

// Using color prop
<StarFill color="gold" />

// Using currentColor (inherits text color)
<div className="text-blue-500">
  <HeartFill fill="currentColor" />
</div>

// Using Tailwind classes
<HeartFill className="text-red-500" fill="currentColor" />

Advanced Styling

// Inline styles
<ArrowDownBoxFill 
  style={{ 
    width: 24, 
    height: 24, 
    color: 'blue',
    cursor: 'pointer',
    transition: 'all 0.3s'
  }} 
/>

// CSS classes
<ArrowDownBoxFill className="icon-button hover:scale-110 transition-transform" />

// All SVG props are supported
<ArrowDownBoxFill
  width={24}
  height={24}
  fill="currentColor"
  stroke="black"
  strokeWidth={2}
  opacity={0.8}
  onClick={() => console.log('Clicked!')}
  onMouseEnter={() => console.log('Hover')}
/>

📚 Available Icons

The library includes 3,136 icons organized into 19 categories:

| Category | Icon Count | Examples | |----------|----------:|----------| | Arrows | 178 | ArrowDownBoxFill, ArrowUpCircleLine, ArrowLeftRightFill | | Buildings | 62 | HomeFill, BuildingLine, HospitalFill | | Business | 210 | BriefcaseFill, PieChartLine, BarChartFill | | Communication | 92 | MailFill, PhoneLine, MessageCircleFill | | Design | 232 | PencilFill, BrushLine, PaletteFill | | Development | 62 | CodeBoxFill, TerminalLine, BugFill | | Device | 172 | ComputerFill, PhoneLine, TabletFill | | Document | 238 | FileFill, FolderLine, FileTextFill | | Editor | 149 | BoldFill, ItalicLine, UnderlineFill | | Finance | 172 | CoinFill, WalletLine, BankCardFill | | Food | 32 | CakeFill, CoffeeLine, RestaurantFill | | Health & Medical | 83 | HeartPulseFill, MedicineBottleLine, StethoscopeFill | | Logos | 278 | FacebookFill, TwitterLine, GithubFill | | Map | 170 | MapPinFill, CompassLine, RoadMapFill | | Media | 292 | PlayCircleFill, PauseLine, VolumeUpFill | | Others | 156 | LeafFill, FlowerLine, RocketFill | | System | 348 | SettingsFill, SearchLine, CheckboxCircleFill | | User & Faces | 128 | UserFill, UserGroupLine, AccountCircleFill | | Weather | 82 | SunFill, MoonLine, CloudyFill |

Icon Naming Convention

All icons follow a consistent naming pattern:

PascalCase: ArrowDownBoxFill, HeartFill, UserLine
Suffix:
- -Fill: Filled/solid version (e.g., HeartFill)
- -Line: Outlined/line version (e.g., HeartLine)

Finding Icons

Browse All Icons: Run the icon browser app included in this repository:

# Clone the repo
git clone https://github.com/phyoofficial/phyo-icon-library.git
cd phyo-icon-library

# Install dependencies
npm install

# Start the browser
npm run dev

This will open a searchable icon browser where you can:

🔍 Search icons by name
📁 Browse by category
👁️ Preview icons
📋 Copy icon names

💡 Examples

import { 
  HomeFill, 
  UserFill, 
  SettingsFill, 
  MailFill 
} from '@phyoofficial/phyo-icon-library';

function Navigation() {
  return (
    <nav className="flex gap-4">
      <a href="/">
        <HomeFill className="w-6 h-6 text-blue-500" />
        Home
      </a>
      <a href="/profile">
        <UserFill className="w-6 h-6 text-blue-500" />
        Profile
      </a>
      <a href="/messages">
        <MailFill className="w-6 h-6 text-blue-500" />
        Messages
      </a>
      <a href="/settings">
        <SettingsFill className="w-6 h-6 text-blue-500" />
        Settings
      </a>
    </nav>
  );
}

Button with Icon

import { SearchLine, AddCircleFill, DeleteBinFill } from '@phyoofficial/phyo-icon-library';

function Buttons() {
  return (
    <div className="flex gap-2">
      <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
        <SearchLine className="w-5 h-5" />
        Search
      </button>
      
      <button className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded">
        <AddCircleFill className="w-5 h-5" />
        Add New
      </button>
      
      <button className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded">
        <DeleteBinFill className="w-5 h-5" />
        Delete
      </button>
    </div>
  );
}

Interactive Icon

import { HeartFill, HeartLine } from '@phyoofficial/phyo-icon-library';
import { useState } from 'react';

function LikeButton() {
  const [liked, setLiked] = useState(false);
  
  return (
    <button 
      onClick={() => setLiked(!liked)}
      className="p-2 hover:bg-gray-100 rounded-full transition"
    >
      {liked ? (
        <HeartFill className="w-6 h-6 text-red-500" />
      ) : (
        <HeartLine className="w-6 h-6 text-gray-400" />
      )}
    </button>
  );
}

Loading State

import { LoaderFill } from '@phyoofficial/phyo-icon-library';

function Loading() {
  return (
    <div className="flex items-center gap-2">
      <LoaderFill 
        className="w-5 h-5 animate-spin text-blue-500" 
      />
      <span>Loading...</span>
    </div>
  );
}

Icon Grid

import { 
  FacebookFill, 
  TwitterFill, 
  InstagramFill, 
  LinkedinFill,
  GithubFill,
  YoutubeFill 
} from '@phyoofficial/phyo-icon-library';

function SocialLinks() {
  return (
    <div className="flex gap-4">
      <a href="#" className="hover:scale-110 transition">
        <FacebookFill className="w-8 h-8 text-blue-600" />
      </a>
      <a href="#" className="hover:scale-110 transition">
        <TwitterFill className="w-8 h-8 text-sky-500" />
      </a>
      <a href="#" className="hover:scale-110 transition">
        <InstagramFill className="w-8 h-8 text-pink-500" />
      </a>
      <a href="#" className="hover:scale-110 transition">
        <LinkedinFill className="w-8 h-8 text-blue-700" />
      </a>
      <a href="#" className="hover:scale-110 transition">
        <GithubFill className="w-8 h-8 text-gray-800" />
      </a>
      <a href="#" className="hover:scale-110 transition">
        <YoutubeFill className="w-8 h-8 text-red-600" />
      </a>
    </div>
  );
}

🛠️ Development Setup

Running the Icon Browser Locally

This repository includes a Vite + React app for browsing all icons:

# Clone the repository
git clone https://github.com/phyoofficial/phyo-icon-library.git
cd phyo-icon-library

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:5173 to browse all 3,136 icons with search functionality.

Project Structure

phyo-icon-library/
├── icons/                    # Source SVG files
│   └── icons/               # Organized by category
│       ├── Arrows/
│       ├── Buildings/
│       ├── Business/
│       └── ...
├── lib/                     # Generated React components (JSX)
│   ├── index.js            # Main export file
│   ├── index.d.ts          # TypeScript definitions
│   └── [Category]/         # Component files by category
├── dist/                    # Bundled output (published to npm)
│   ├── index.js            # CommonJS bundle
│   ├── index.esm.js        # ES Module bundle
│   └── index.d.ts          # TypeScript definitions
├── src/                     # Icon browser app
│   ├── App.jsx             # Main app component
│   ├── IconGrid.jsx        # Icon display grid
│   └── main.jsx            # Entry point
├── scripts/                 # Build scripts
│   ├── generate-components.js  # Generates React components from SVGs
│   └── copy-icons.js           # Copies icons for browser app
├── package.json
├── rollup.config.js        # Bundler configuration
├── vite.config.js          # Vite configuration
└── README.md               # This file

Build Scripts

# Generate React components from SVG files
npm run generate

# Bundle library with Rollup
npm run bundle

# Build complete library for publishing
npm run build:lib

# Run icon browser app
npm run dev

# Build icon browser app
npm run build

🔧 Framework Support

✅ React (Vite, CRA)

import { HeartFill } from '@phyoofficial/phyo-icon-library';

function App() {
  return <HeartFill className="w-6 h-6" />;
}

✅ Next.js 13+ App Router (Server Components)

// app/page.tsx - Works in Server Components!
import { ArrowDownBoxFill } from '@phyoofficial/phyo-icon-library';

export default function Page() {
  return <ArrowDownBoxFill className="w-6 h-6" />;
}

✅ Next.js 13+ App Router (Client Components)

'use client';

import { HeartFill } from '@phyoofficial/phyo-icon-library';

export default function ClientComponent() {
  return <HeartFill className="w-6 h-6" />;
}

✅ Next.js 12 Pages Router

// pages/index.tsx
import { StarFill } from '@phyoofficial/phyo-icon-library';

export default function Home() {
  return <StarFill className="w-6 h-6" />;
}

✅ Remix

import { MusicFill } from '@phyoofficial/phyo-icon-library';

export default function Index() {
  return <MusicFill className="w-6 h-6" />;
}

✅ TypeScript

Full TypeScript support with IntelliSense:

import { HeartFill, IconProps } from '@phyoofficial/phyo-icon-library';

const MyIcon: React.FC<IconProps> = (props) => {
  return <HeartFill {...props} />;
};

📖 API Reference

IconProps

All icon components accept standard SVG props:

import { SVGProps } from 'react';

type IconProps = SVGProps<SVGSVGElement>;

Common props:

| Prop | Type | Description | |------|------|-------------| | width | number \| string | Icon width | | height | number \| string | Icon height | | fill | string | Fill color | | stroke | string | Stroke color | | strokeWidth | number \| string | Stroke width | | className | string | CSS class names | | style | CSSProperties | Inline styles | | onClick | MouseEventHandler | Click handler | | onMouseEnter | MouseEventHandler | Mouse enter handler | | onMouseLeave | MouseEventHandler | Mouse leave handler | | ... | | All other SVG attributes |

❓ FAQ

A: Run the icon browser:

npm run dev

This opens a searchable interface with all 3,136 icons.

A: Yes! The library includes "use client" directive and works in both Server and Client Components.

A: No! The library is tree-shakeable. Only the icons you import will be included in your bundle. Each icon is ~1-2KB.

A: Absolutely! Full TypeScript definitions are included with IntelliSense support.

A: Use the fill prop or className with fill="currentColor":

<HeartFill fill="red" />
<HeartFill className="text-red-500" fill="currentColor" />

A: Yes! Use CSS animations or libraries like Framer Motion:

<LoaderFill className="animate-spin" />

A: Yes! The library works perfectly with SSR in Next.js, Remix, and other frameworks.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

MIT License - see the LICENSE file for details.

🙏 Credits

This library is built on top of the amazing Remix Icon project.

📞 Support

📧 Email: [email protected]
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

🌟 Show Your Support

If you find this library helpful, please consider:

⭐ Starring the repository
🐦 Sharing on Twitter
📝 Writing a blog post
💖 Sponsoring the project

Made with ❤️ by Phyo Official

⬆ Back to Top