React FontAwesome Icon Picker

A modern, lightweight, and fully-featured icon picker component for React with 2000+ Font Awesome icons, official category filtering, and TypeScript support.

✨ Features

• 🎨 2000+ Icons - All Font Awesome free icons (Solid, Regular, Brands)
• 🏷️ Official Categories - Filter by 65+ official Font Awesome categories
• 🔍 Smart Search - Real-time search with instant results
• 🎭 Style Tabs - Switch between Solid, Regular, and Brand icons
• 📦 Pre-configured Pickers - Ready-to-use components for common use cases
• 💡 Lightweight Design - Compact and minimal UI
• 📱 Responsive - Mobile-friendly design
• ⚡ High Performance - Optimized rendering with React best practices
• 🔧 TypeScript - Full TypeScript support with type definitions
• 📋 Copy to Clipboard - Quick copy icon classes
• 🎯 Zero Config - Works out of the box
• 🎨 Customizable - Override styles and behavior

📦 Installation

npm install react-fontawesome-icon-picker

yarn add react-fontawesome-icon-picker

pnpm add react-fontawesome-icon-picker

🚀 Quick Start

import React, { useState } from 'react';
import { IconPicker } from 'react-fontawesome-icon-picker';
import 'react-fontawesome-icon-picker/dist/index.css';

function App() {
  const [icon, setIcon] = useState('fas fa-star');

  return (
    <IconPicker
      value={icon}
      onChange={(icon) => setIcon(icon)}
    />
  );
}

📖 API Reference

IconPicker Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string \| null | null | Selected icon in format "prefix fa-iconName" (e.g., "fas fa-star") | | onChange | (icon: string) => void | - | Callback when an icon is selected | | showSearch | boolean | true | Show/hide search bar | | showStyleTabs | boolean | true | Show/hide style tabs (Solid, Regular, Brands) | | showCategories | boolean | true | Show/hide category filter chips | | iconsPerRow | number | 10 | Number of icons per row in the grid | | maxHeight | string | '400px' | Maximum height of the dropdown | | placeholder | string | 'Select an icon' | Placeholder text when no icon is selected | | className | string | '' | Custom CSS class for the container | | disabled | boolean | false | Disable the picker | | autoFocus | boolean | true | Auto-focus search input when opened | | showCount | boolean | true | Show icon count in footer | | customIcons | IconDefinition[] | [] | Add custom Font Awesome icons | | includeStyles | IconPrefix[] | ['fas', 'far', 'fab'] | Icon styles to include | | searchDebounce | number | 300 | Search debounce delay in milliseconds | | filterCategories | CategoryType[] | - | Filter by internal categories (simple) | | fontAwesomeCategories | FontAwesomeCategory[] | - | Filter by official Font Awesome categories | | filterFunction | (icon: IconInfo) => boolean | - | Custom filter function for icons |

📚 Usage Examples

1. Basic Usage

import { IconPicker } from 'react-fontawesome-icon-picker';

function Basic() {
  const [icon, setIcon] = useState('fas fa-heart');

  return (
    <IconPicker
      value={icon}
      onChange={setIcon}
    />
  );
}

2. Filter by Official Font Awesome Categories

Use the official Font Awesome categories to filter icons:

import { IconPicker } from 'react-fontawesome-icon-picker';

function TravelPicker() {
  const [icon, setIcon] = useState(null);

  return (
    <IconPicker
      value={icon}
      onChange={setIcon}
      fontAwesomeCategories={['travel', 'automotive']}
      placeholder="Select a travel icon..."
      showCategories={false}
    />
  );
}

Available Font Awesome Categories: accessibility, alert, animals, arrows, automotive, buildings, business, camping, charity, childhood, clothing, code, communication, computers, connectivity, construction, design, devices, editors, education, energy, files, finance, food, fruits-vegetables, games, genders, halloween, hands, health, holiday, household, humanitarian, logistics, maps, maritime, marketing, mathematics, media, medical, money, moving, music, nature, objects, payments, political, punctuation, religion, science, science-fiction, security, shapes, shopping, social, spinners, sports, spring, summer, toggle, travel, users, weather, writing

3. Pre-configured Category Pickers

Use ready-made components for common use cases:

import {
  SocialIconPicker,
  TravelIconPicker,
  FileIconPicker,
  UserIconPicker,
  BusinessIconPicker,
  CommunicationIconPicker,
  MediaIconPicker,
  TechIconPicker,
  WeatherIconPicker,
  ShoppingIconPicker
} from 'react-fontawesome-icon-picker';

function App() {
  const [socialIcon, setSocialIcon] = useState('fab fa-twitter');

  return (
    <SocialIconPicker
      value={socialIcon}
      onChange={setSocialIcon}
    />
  );
}

4. Custom Filter Function

Create your own filtering logic:

import { IconPicker } from 'react-fontawesome-icon-picker';

function CustomFiltered() {
  const [icon, setIcon] = useState(null);

  // Only show icons containing "user" or "person"
  const userFilter = (icon) => {
    return icon.name.includes('user') || icon.name.includes('person');
  };

  return (
    <IconPicker
      value={icon}
      onChange={setIcon}
      filterFunction={userFilter}
      showCategories={false}
    />
  );
}

5. Custom Configuration

import { IconPicker } from 'react-fontawesome-icon-picker';

function Custom() {
  const [icon, setIcon] = useState('fas fa-star');

  return (
    <IconPicker
      value={icon}
      onChange={setIcon}
      showCategories={false}
      iconsPerRow={8}
      maxHeight="300px"
      placeholder="Choose an icon..."
      searchDebounce={500}
    />
  );
}

6. Form Integration

Works seamlessly with React Hook Form and other form libraries:

import { IconPicker } from 'react-fontawesome-icon-picker';
import { useForm } from 'react-hook-form';

function FormExample() {
  const { register, setValue, watch } = useForm();
  const iconValue = watch('icon');

  return (
    <form>
      <label>Category Icon</label>
      <IconPicker
        value={iconValue}
        onChange={(icon) => setValue('icon', icon)}
      />
      <input {...register('icon')} type="hidden" />
    </form>
  );
}

7. Only Solid Icons

import { IconPicker } from 'react-fontawesome-icon-picker';

function SolidOnly() {
  const [icon, setIcon] = useState(null);

  return (
    <IconPicker
      value={icon}
      onChange={setIcon}
      includeStyles={['fas']}
      showStyleTabs={false}
    />
  );
}

8. Display Selected Icon

import { IconPicker, FontAwesomeIcon } from 'react-fontawesome-icon-picker';

function IconDisplay() {
  const [icon, setIcon] = useState('fas fa-star');

  // Parse the icon string
  const [prefix, iconName] = icon ? icon.split(' fa-') : [null, null];

  return (
    <div>
      <IconPicker value={icon} onChange={setIcon} />

      {icon && (
        <FontAwesomeIcon
          icon={[prefix, iconName]}
          size="3x"
        />
      )}
    </div>
  );
}

🎨 Styling

The component comes with default styles. Import the CSS:

import 'react-fontawesome-icon-picker/dist/index.css';

Custom Styling

Override default styles using CSS:

/* Custom trigger button */
.icon-picker-trigger {
  border-radius: 12px;
  border-color: #your-color;
}

/* Custom dropdown */
.icon-picker-dropdown {
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

/* Custom selected state */
.icon-item.selected {
  background: #your-primary-color;
}

🔧 Helper Functions

Category Helpers

import {
  getIconCategories,
  isInCategory,
  getIconsByCategory
} from 'react-fontawesome-icon-picker';

// Get all categories for an icon
const categories = getIconCategories('plane');
// Returns: ['travel']

// Check if an icon belongs to a category
const isTravel = isInCategory('car', 'travel');
// Returns: true

// Get all icons in a category
const travelIcons = getIconsByCategory('travel');
// Returns: ['plane', 'car', 'train', ...]

📦 Pre-configured Components

The package includes pre-configured picker components for common use cases:

| Component | Categories | Use Case | |-----------|-----------|----------| | SocialIconPicker | Social media | Social media links, profiles | | TravelIconPicker | Travel, transportation | Travel apps, booking systems | | FileIconPicker | Files, folders | File managers, document systems | | UserIconPicker | Users, people | User profiles, team members | | BusinessIconPicker | Business, finance | Business apps, dashboards | | CommunicationIconPicker | Communication | Chat apps, messaging | | MediaIconPicker | Media, audio | Media players, galleries | | TechIconPicker | Computers, technology | Tech products, software | | WeatherIconPicker | Weather | Weather apps, forecasts | | ShoppingIconPicker | Shopping, e-commerce | E-commerce, stores |

🏗️ Advanced Usage

Using with Next.js

import dynamic from 'next/dynamic';

const IconPicker = dynamic(
  () => import('react-fontawesome-icon-picker').then(mod => mod.IconPicker),
  { ssr: false }
);

TypeScript Types

import type {
  IconPickerProps,
  IconInfo,
  CategoryType,
  FontAwesomeCategory
} from 'react-fontawesome-icon-picker';

Multiple Icon Pickers

import { IconPicker } from 'react-fontawesome-icon-picker';

function MultiplePickers() {
  const [icons, setIcons] = useState({
    primary: 'fas fa-star',
    secondary: 'far fa-heart',
    tertiary: null
  });

  return (
    <>
      <IconPicker
        value={icons.primary}
        onChange={(icon) => setIcons(prev => ({ ...prev, primary: icon }))}
      />
      <IconPicker
        value={icons.secondary}
        onChange={(icon) => setIcons(prev => ({ ...prev, secondary: icon }))}
      />
    </>
  );
}

🌐 Browser Support

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

📄 License

MIT © wwwappz

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page.

🙏 Credits

• Built with React
• Icons from Font Awesome
• TypeScript support
• Inspired by various icon picker implementations

📝 Changelog

Version 1.0.0

• Initial release
• All Font Awesome free icons included (2000+)
• TypeScript support
• Search with real-time filtering
• Official Font Awesome category support (65+ categories)
• Pre-configured category pickers
• Custom filter functions
• Lightweight and compact design
• Dark mode support
• Copy to clipboard
• Mobile responsive

Need help? Check out the examples or open an issue.

Made with ❤️ by wwwappz