hyperfusion-icons

Hyperfusion Icons

The ultimate collection of 3,000+ modern SVG icons for web and mobile applications. This comprehensive package includes brand logos, UI elements, business icons, cryptocurrency symbols, and much more.

🎨 What's Included

• 1,715+ Brand Icons - Social media, tech companies, platforms
• 500+ Rounded Icons - Smooth, modern UI elements
• 414+ Sharp Icons - Clean, precise interface icons
• 400+ Business & Finance Icons - Banking, crypto, payments
• Multiple Variants - Circle, square, rounded styles
• Multiple Colors - Black, white, multicolor versions
• Multiple Sizes - Standard, @256px, @512px variants

📦 Installation

npm install hyperfusion-icons

🚀 Usage

CommonJS (Node.js)

const { NameFacebookTypeCircleColorTypeMulticolour, SharpHomeSharp, Analytics } = require('hyperfusion-icons');

// Use individual icons
console.log(NameFacebookTypeCircleColorTypeMulticolour); // Returns SVG string

// Or import all icons
const allIcons = require('hyperfusion-icons');
console.log(allIcons.NameGoogleTypeSquareColorTypeBlack);

ES Modules

import { NameTwitterTypeCircleColorTypeBlack, RoundedUser, CreditCard } from 'hyperfusion-icons';
// or
import allIcons from 'hyperfusion-icons';

// Use in your application
const iconSvg = NameTwitterTypeCircleColorTypeBlack;

React Example

import React from 'react';
import { NameInstagramTypeRoundedColorTypeMulticolour, SharpSearchSharp } from 'hyperfusion-icons';

function MyComponent() {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: NameInstagramTypeRoundedColorTypeMulticolour }} />
      <div dangerouslySetInnerHTML={{ __html: SharpSearchSharp }} />
    </div>
  );
}

React Component Wrapper

For better React integration with dynamic colors and sizes:

import React from 'react';
import * as Icons from 'hyperfusion-icons';

const HyperfusionIcon = ({ 
  name, 
  size = 24, 
  color = 'currentColor', 
  strokeWidth = 2,
  className = '',
  style = {},
  ...props 
}) => {
  const iconSvg = Icons[name];
  
  if (!iconSvg) {
    console.warn(`Icon "${name}" not found`);
    return null;
  }
  
  // Replace hardcoded colors and sizes with dynamic values
  let processedSvg = iconSvg
    .replace(/stroke="[^"]*"/g, `stroke="${color}"`)
    .replace(/fill="(?!none)[^"]*"/g, `fill="${color}"`)
    .replace(/stroke-width="[^"]*"/g, `stroke-width="${strokeWidth}"`)
    .replace(/width="[^"]*"/g, `width="${size}"`)
    .replace(/height="[^"]*"/g, `height="${size}"`);
  
  return (
    <span 
      className={`hyperfusion-icon ${className}`}
      style={{ display: 'inline-block', lineHeight: 0, ...style }}
      {...props}
      dangerouslySetInnerHTML={{ __html: processedSvg }}
    />
  );
};

// Usage Examples:
<HyperfusionIcon name="NameFacebookTypeCircleColorTypeBlue" size={32} color="#1877F2" />
<HyperfusionIcon name="SharpHomeSharp" size={24} color="currentColor" />
<HyperfusionIcon name="RoundedUser" color="#10B981" strokeWidth={3} />

Tailwind CSS Integration

import React from 'react';
import * as Icons from 'hyperfusion-icons';

interface TailwindIconProps extends React.HTMLAttributes<HTMLSpanElement> {
  name: keyof typeof Icons;
  size?: string; // Tailwind size classes like 'w-6 h-6'
  className?: string;
}

const TailwindIcon: React.FC<TailwindIconProps> = ({ 
  name, 
  size = 'w-6 h-6',
  className = '',
  ...props 
}) => {
  const iconSvg = Icons[name];
  
  if (!iconSvg) return null;
  
  // Replace all colors with currentColor for Tailwind compatibility
  let processedSvg = iconSvg
    .replace(/stroke="[^"]*"/g, 'stroke="currentColor"')
    .replace(/fill="(?!none)[^"]*"/g, 'fill="currentColor"')
    .replace(/width="[^"]*"/g, '')
    .replace(/height="[^"]*"/g, '')
    .replace('<svg', '<svg width="100%" height="100%"');
  
  return (
    <span 
      className={`inline-block ${size} ${className}`}
      {...props}
      dangerouslySetInnerHTML={{ __html: processedSvg }}
    />
  );
};

// Usage with Tailwind classes:
<TailwindIcon name="NameLinkedinTypeSquareColorTypeBlue" className="text-blue-600" />
<TailwindIcon name="SharpSettingsSharp" size="w-8 h-8" className="text-gray-700 hover:text-blue-500" />

📋 Icon Categories

🏢 Brand Icons (1,715+)

Popular social media and tech company logos in multiple styles:

• Social Media: Facebook, Twitter, Instagram, LinkedIn, TikTok, YouTube, etc.
• Tech Companies: Google, Apple, Microsoft, Adobe, etc.
• Development: GitHub, GitLab, VS Code, etc.
• Communication: WhatsApp, Telegram, Discord, Slack, etc.
• Design: Figma, Sketch, Behance, Dribbble, etc.

Naming Pattern: Name{BrandName}Type{Shape}ColorType{Color}{Size?}

Examples:

• NameFacebookTypeCircleColorTypeMulticolour
• NameGoogleTypeSquareColorTypeBlack256px
• NameInstagramTypeRoundedColorTypeWhite

🔄 Rounded Icons (500+)

Smooth, modern UI elements with rounded edges:

• Navigation: RoundedArrowBack, RoundedArrowForward, RoundedHome
• Actions: RoundedAdd, RoundedEdit, RoundedDelete, RoundedSave
• Media: RoundedPlay, RoundedPause, RoundedStop, RoundedVolumeHigh
• Communication: RoundedMail, RoundedCall, RoundedChatbubble

Naming Pattern: Rounded{IconName}

⚡ Sharp Icons (414+)

Clean, precise interface icons with sharp edges:

• Navigation: SharpArrowBackSharp, SharpHomeSharp, SharpMenuSharp
• Actions: SharpAddSharp, SharpSearchSharp, SharpSettingsSharp
• Media: SharpPlaySharp, SharpCameraSharp, SharpImageSharp
• System: SharpNotificationsSharp, SharpBatteryFullSharp

Naming Pattern: Sharp{IconName}Sharp

💼 Business & Finance Icons (400+)

Professional icons for financial and business applications:

• Banking: Analytics, BankLocator, CreditCard, WalletMoney
• Cryptocurrency: CoinsBitcoin, CoinsEthereum, CoinsDogecoin, CoinsXRP
• Payments: CashlessTransaction, UPIDollar, PaymentGateways
• Investment: MutualFunds, StockChart, GoldInvestment, Portfolio

🌍 Country Flags (200+)

Complete collection of world flags:

• Property1Afghanistan, Property1Algeria, Property1Australia
• Available for all major countries and territories

🎯 Icon Variants

Shapes

• Circle: Circular background
• Square: Square background
• Rounded: Rounded corners

Colors

• Black: Dark theme compatible
• White: Light backgrounds
• Multicolour: Original brand colors

Sizes

• Standard: Default size
• @256px: High resolution 256px
• @512px: Ultra high resolution 512px

💡 Usage Tips

Icon Sizing Best Practices

/* Recommended CSS for icon containers */
.icon-container {
  display: inline-block;
  line-height: 0;
}

/* Tailwind equivalent */
.icon-container {
  @apply inline-block leading-none;
}

Finding Icons

With 3000+ icons, use your IDE's autocomplete or search:

// Search for brand icons
import { Name... } from 'hyperfusion-icons';

// Search for UI icons  
import { Sharp..., Rounded... } from 'hyperfusion-icons';

// Search for business icons
import { Analytics, CreditCard, Bitcoin... } from 'hyperfusion-icons';

🔍 Popular Icons

Most Used Brand Icons

import {
  NameFacebookTypeCircleColorTypeMulticolour,
  NameTwitterTypeSquareColorTypeBlack,
  NameInstagramTypeRoundedColorTypeMulticolour,
  NameLinkedinTypeCircleColorTypeBlue,
  NameGoogleTypeSquareColorTypeMulticolour,
  NameYoutubeTypeCircleColorTypeMulticolour
} from 'hyperfusion-icons';

Essential UI Icons

import {
  SharpHomeSharp,
  SharpSearchSharp,
  SharpMenuSharp,
  SharpSettingsSharp,
  RoundedUser,
  RoundedNotifications,
  RoundedMail,
  RoundedHeart
} from 'hyperfusion-icons';

Business & Finance

import {
  Analytics,
  CreditCard,
  WalletMoney,
  CoinsBitcoin,
  CoinsEthereum,
  ChartGrowthSuccess,
  DollarCurrency
} from 'hyperfusion-icons';

🛠️ Development

Building the Package

npm run build

This regenerates the index files with all available icons.

File Structure

hyperfusion-icons/
├── icons/           # 3000+ SVG source files
├── index.js         # CommonJS exports
├── index.esm.js     # ES Module exports  
├── index.d.ts       # TypeScript definitions
├── build.js         # Build script
└── package.json

📊 Package Stats

• Total Icons: 3,057
• Package Size: ~13MB (source SVGs)
• Compressed Size: ~2MB (when bundled)
• Tree Shakeable: ✅ Import only what you need
• TypeScript: ✅ Full type definitions included

🔄 Version History

2.0.0 (Latest)

• 🎉 3,000+ icons - Massive expansion from 57 to 3,057 icons
• 🏢 1,715 brand icons - Complete social media and tech company collection
• 🎨 Multiple variants - Circle, square, rounded shapes in various colors
• 📱 High-res versions - @256px and @512px variants
• 💼 Business icons - Banking, crypto, finance, and country flags
• ⚡ Performance - Tree-shakeable imports
• 🛠️ Better DX - Improved TypeScript support and documentation

1.0.24 (Previous)

• Initial release with 57 basic icons

📄 License

MIT License - feel free to use in your projects!

🤝 Contributing

• Add your SVG files to the icons/ directory
• Run npm run build to regenerate the exports
• Update this README if needed
• Submit a pull request

🆘 Support

• GitHub Issues: Report bugs or request features
• Documentation: This README covers all usage patterns
• TypeScript: Full IntelliSense support included

Made with ❤️ by ProAI | 3,057 icons and counting! 🎨