DEV Community

Cüneyt Çakar
Cüneyt Çakar

Posted on

Introducing @spexop/icons: A Modern React Icon Library with 262 Professional Icons

#react #typescript #opensource #ui

Introducing @spexop/icons: A Modern React Icon Library

I'm excited to share @spexop/icons - a professional icon library built specifically for modern React applications.

🎯 Why Another Icon Library?

Fair question! While there are many excellent icon libraries out there, I found myself repeatedly running into the same issues:

  • Bundle size concerns: Importing entire libraries for just a handful of icons
  • Missing variants: Needing both outlined and filled versions of icons
  • Scattered dependencies: Installing separate packages for brand/social icons
  • TypeScript friction: Poor or missing type definitions
  • Accessibility gaps: Having to manually add ARIA attributes

@spexop/icons addresses all of these pain points.

✨ Key Features

1. Comprehensive Icon Collection

262 carefully curated icons across 20+ categories:

  • Navigation & Arrows (27)
  • Actions & Editing (14)
  • Communication (11)
  • Media & Entertainment (14)
  • Files & Folders (13)
  • Social & Community (15)
  • Weather (8)
  • Development Tools (10)
  • System & Status (20)
  • ...and more!

2. Filled Variants Built-In

No need for separate packages! Includes filled versions of commonly used icons:

import { Heart, HeartFilled, Star, StarFilled, Bookmark, BookmarkFilled } from '@spexop/icons';

// Mix and match based on state
const [liked, setLiked] = useState(false);

<button onClick={() => setLiked(!liked)}>
  {liked ? <HeartFilled color="#ef4444" /> : <Heart />}
</button>
Enter fullscreen mode Exit fullscreen mode

3. Brand Icons Included

30+ popular brand and social media icons:

  • Facebook, Twitter/X, Instagram, LinkedIn
  • GitHub, GitLab, Discord, Slack
  • Apple, Google, Microsoft
  • And many more!

No need for react-icons just for brand logos.

4. Tree-Shakeable by Design

Only pay for what you use:

// This adds ~0.5KB to your bundle
import { Home, Settings } from '@spexop/icons';

// Not this entire library
import * as Icons from '@spexop/icons'; // ❌ Don't do this
Enter fullscreen mode Exit fullscreen mode

Built with modern bundlers in mind (Vite, Webpack 5+, Rollup).

5. Fully Typed with TypeScript

Strict TypeScript support with full IntelliSense:

import { IconProps } from '@spexop/icons';

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
  color?: string;
  title?: string;
  className?: string;
  strokeWidth?: number;
}
Enter fullscreen mode Exit fullscreen mode

6. Accessible by Default

Every icon includes proper ARIA attributes:

<Search title="Search" />
// Renders with role="img" and aria-label="Search"
Enter fullscreen mode Exit fullscreen mode

📦 Installation 

# Using pnpm
pnpm add @spexop/icons

# Using npm
npm install @spexop/icons

# Using yarn
yarn add @spexop/icons
Enter fullscreen mode Exit fullscreen mode

🚀 Quick Start

Basic Usage 

import { Home, User, Settings, Bell } from '@spexop/icons';

function App() {
  return (
    <nav>
      <Home />
      <User size={32} />
      <Settings color="#3b82f6" />
      <Bell strokeWidth={1.5} />
    </nav>
  );
}
Enter fullscreen mode Exit fullscreen mode

Customization

Icons inherit color from CSS by default:

<div style={{ color: '#ef4444' }}>
  <Home /> {/* Will be red */}
</div>
Enter fullscreen mode Exit fullscreen mode

Or customize directly:

<Settings 
  size={24}
  color="#3b82f6"
  strokeWidth={2}
  className="icon-rotate"
  title="Application Settings"
/>
Enter fullscreen mode Exit fullscreen mode

With Tailwind CSS 

<Home className="w-6 h-6 text-blue-500 hover:text-blue-700" />
Enter fullscreen mode Exit fullscreen mode

Dynamic Icons 

const iconMap = {
  home: Home,
  settings: Settings,
  user: User,
};

function DynamicIcon({ name }: { name: keyof typeof iconMap }) {
  const Icon = iconMap[name];
  return <Icon />;
}
Enter fullscreen mode Exit fullscreen mode

🎨 Design Philosophy

All icons follow consistent design principles:

  • 24×24 pixel base size: Scales perfectly at any size
  • 2px stroke width: Clean and readable
  • Minimal style: Works with any design system
  • Optimized SVGs: Automatically processed with SVGO
  • No hardcoded colors: Fully customizable

📊 Bundle Size

One of the biggest advantages is the minimal bundle impact:

Import Style Bundle Impact
Single icon ~0.5KB
10 icons ~5KB
Entire library (don't!) ~57KB
Gzipped ~17KB

Compare this to libraries that force you to import everything!

🛠️ Technical Details

Build Output

  • ESM: Modern import syntax
  • CJS: Legacy require() support
  • TypeScript: Full .d.ts definitions
  • Source maps: Included for debugging

Zero Dependencies

The published package has zero runtime dependencies. Only peer dependency:

{
  "peerDependencies": {
    "react": ">=16.8.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Works with React 16.8+ (Hooks era) through React 19.

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

📚 Documentation

Comprehensive documentation available:

  • Icon Catalog: Browse all 262 icons with search
  • API Reference: Complete props documentation
  • Examples: Real-world usage patterns
  • Contributing Guide: Add your own icons
  • TypeScript Guide: Advanced type usage

🤝 Contributing

This is an open-source project and contributions are welcome!

Ways to contribute:

  • Request new icons
  • Submit icon designs (SVG files)
  • Improve documentation
  • Report bugs
  • Share feedback

Check out the Contributing Guide.

🗺️ Roadmap

Plans for future releases:

  • v0.2.0: Animated icon variants
  • v0.3.0: Additional size presets (16px, 20px, 32px)
  • v1.0.0: Stable API, 300+ icons
  • Vue & Svelte versions (community request)

🎓 Lessons Learned

Building this library taught me:

  1. SVG optimization matters: SVGO reduced file sizes by 40%
  2. Tree-shaking isn't automatic: Proper ESM structure is crucial
  3. TypeScript strict mode catches bugs: Saved hours of debugging
  4. Documentation is half the work: Good docs = happy users
  5. Testing in real projects: Dogfooding reveals issues fast

🔗 Links

💬 Feedback Welcome!

This is the first release, and I'd love to hear your thoughts:

  • What icons are missing?
  • What features would you like?
  • How can we improve the DX?

Drop a comment below or open an issue on GitHub!

Try It Out! 

npm install @spexop/icons
Enter fullscreen mode Exit fullscreen mode 
import { Home, Heart, Github } from '@spexop/icons';

function App() {
  return (
    <div>
      <Home size={32} color="#667eea" />
      <Heart color="#ef4444" />
      <Github size={24} />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Happy coding! 🚀

Built by Spexop UI

Cuneyt Cakar (@olmstedian)

📧 ccakar@spexop.com

🌐 www.spexop.com

If you found this useful, give it a ❤️ and share with your network!

Top comments (0)