Icona

Overview

Icona is a comprehensive icon library featuring over 200 icon sets from popular collections including Font Awesome, Material Design, Lucide, and many more. Each icon is available as an SVG that you can customize with colors, sizes, and transformations.

Features

• 200+ Icon Sets - Access to thousands of professional icons from popular libraries
• Real-time Search - Quickly find the perfect icon for your project
• SVG Editor - Customize icons with colors, sizes, and transformations
• Copy & Download - Easy one-click copying or downloading of customized icons
• Zero Dependencies - Pure SVG icons that work anywhere

How to Use

1. Browse Categories - Select from 200+ icon categories using the dropdown menu
2. Search Icons - Use the search bar to find specific icons by name
3. Customize - Click any icon to open the editor and customize colors, size, and rotation
4. Export - Copy the SVG code or download the icon file

Icon Sets Include

Popular icon libraries such as:

• Font Awesome (Regular, Solid, Brands)
• Material Design Icons
• Lucide Icons
• Heroicons
• Feather Icons
• Bootstrap Icons
• And 190+ more collections

Usage in Your Project

After customizing an icon, you can:

1. Copy the SVG - Paste directly into your HTML/JSX
2. Download as File - Save as .svg file for use in design tools
3. Integrate with Components - Use inline SVG in your React components

// Example usage in React
export function MyIcon() {
  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      width="24" 
      height="24" 
      viewBox="0 0 1000 1000"
    >
      {/* Icon path here */}
    </svg>
  );
}

Customization Options

The SVG editor provides:

• Color Picker - Change icon colors with hex color codes
• Size Control - Adjust icon size from 16px to 256px
• Rotation - Rotate icons in 15° increments
• Stroke Width - Adjust stroke thickness for outlined icons
• Reset Function - Quickly reset all customizations

Performance

All icons are:

• Loaded on-demand from CDN
• Cached for optimal performance
• Lightweight SVG format
• Zero JavaScript dependencies when exported

Visit the Icona page to start browsing and customizing icons for your project.