Feather Icons

Feather is a collection of simply beautiful open-source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.

Installation

Feather icons are included with React Icons:

npm install react-icons

Import Path

import { FiHome, FiUser, FiSettings } from 'react-icons/fi';

Library Details

Icon Count: 287Version: 4.29.1Import: react-icons/fiPrefix: FiLicense: MIT LicenseProject: feathericons.com

Key Features

Simple & Beautiful

Clean, minimalist design that works in any project

Consistent Design

All icons designed on 24x24 grid with 2px stroke

Highly Customizable

Easy to customize size, color, and stroke width

Open Source

MIT licensed and free for any use

Usage Examples

Basic Usage

import { FiHome, FiUser, FiSettings } from 'react-icons/fi';

function App() {
  return (
    <div>
      <FiHome />
      <FiUser />
      <FiSettings />
    </div>
  );
}

import {
  FiHome,
  FiUser,
  FiSettings,
  FiBell,
  FiSearch,
  FiMenu,
  FiX
} from 'react-icons/fi';

function Navigation() {
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
    <nav>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? <FiX /> : <FiMenu />}
      </button>
      
      {isOpen && (
        <div className="nav-menu">
          <a href="/"><FiHome /> Home</a>
          <a href="/profile"><FiUser /> Profile</a>
          <a href="/settings"><FiSettings /> Settings</a>
          <a href="/notifications"><FiBell /> Notifications</a>
          <a href="/search"><FiSearch /> Search</a>
        </div>
      )}
    </nav>
  );
}

Action Buttons

import {
  FiPlus,
  FiEdit,
  FiTrash2,
  FiDownload,
  FiShare2,
  FiSave,
  FiCopy,
  FiExternalLink
} from 'react-icons/fi';

function ActionButtons() {
  return (
    <div className="actions">
      <button className="btn-primary">
        <FiPlus /> Add New
      </button>
      <button className="btn-secondary">
        <FiEdit /> Edit
      </button>
      <button className="btn-danger">
        <FiTrash2 /> Delete
      </button>
      <button className="btn-outline">
        <FiDownload /> Download
      </button>
      <button className="btn-outline">
        <FiShare2 /> Share
      </button>
      <button className="btn-outline">
        <FiSave /> Save
      </button>
    </div>
  );
}

Common Use Cases

Forms
Alerts & Messages
Cards & Lists
File Management

import {
  FiMail,
  FiLock,
  FiEye,
  FiEyeOff,
  FiUser,
  FiPhone,
  FiSearch,
  FiCheck,
  FiAlertCircle
} from 'react-icons/fi';

function ContactForm() {
  const [showPassword, setShowPassword] = React.useState(false);
  
  return (
    <form>
      <div className="form-group">
        <label>
          <FiUser /> Full Name
        </label>
        <input type="text" placeholder="John Doe" />
      </div>
      
      <div className="form-group">
        <label>
          <FiMail /> Email
        </label>
        <div className="input-with-icon">
          <input 
            type="email" 
            placeholder="john@example.com" 
          />
          <FiCheck className="text-success" />
        </div>
      </div>
      
      <div className="form-group">
        <label>
          <FiPhone /> Phone
        </label>
        <input type="tel" placeholder="+1 (555) 123-4567" />
      </div>
      
      <div className="form-group">
        <label>
          <FiLock /> Password
        </label>
        <div className="input-with-icon">
          <input 
            type={showPassword ? 'text' : 'password'}
            placeholder="Enter password"
          />
          <button 
            type="button"
            onClick={() => setShowPassword(!showPassword)}
          >
            {showPassword ? <FiEyeOff /> : <FiEye />}
          </button>
        </div>
      </div>
      
      <button type="submit" className="btn-primary">
        <FiCheck /> Submit
      </button>
    </form>
  );
}

import {
  FiCheckCircle,
  FiAlertTriangle,
  FiInfo,
  FiAlertCircle,
  FiX
} from 'react-icons/fi';

function Notification({ type, message, onClose }) {
  const config = {
    success: {
      icon: FiCheckCircle,
      color: 'text-green-500',
      bg: 'bg-green-50'
    },
    warning: {
      icon: FiAlertTriangle,
      color: 'text-yellow-500',
      bg: 'bg-yellow-50'
    },
    info: {
      icon: FiInfo,
      color: 'text-blue-500',
      bg: 'bg-blue-50'
    },
    error: {
      icon: FiAlertCircle,
      color: 'text-red-500',
      bg: 'bg-red-50'
    }
  };
  
  const { icon: Icon, color, bg } = config[type];
  
  return (
    <div className={`notification ${bg} ${color}`}>
      <Icon className="notification-icon" />
      <p className="notification-message">{message}</p>
      <button onClick={onClose} className="notification-close">
        <FiX />
      </button>
    </div>
  );
}

import {
  FiMoreVertical,
  FiHeart,
  FiMessageCircle,
  FiShare2,
  FiBookmark,
  FiEdit,
  FiTrash2,
  FiExternalLink
} from 'react-icons/fi';

function Card({ item }) {
  const [liked, setLiked] = React.useState(false);
  const [saved, setSaved] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  
  return (
    <div className="card">
      <div className="card-header">
        <div className="card-title">{item.title}</div>
        <div className="card-menu">
          <button onClick={() => setMenuOpen(!menuOpen)}>
            <FiMoreVertical />
          </button>
          
          {menuOpen && (
            <div className="dropdown-menu">
              <button><FiEdit /> Edit</button>
              <button><FiExternalLink /> Open</button>
              <button><FiTrash2 /> Delete</button>
            </div>
          )}
        </div>
      </div>
      
      <div className="card-content">
        <p>{item.description}</p>
      </div>
      
      <div className="card-actions">
        <button 
          onClick={() => setLiked(!liked)}
          className={liked ? 'active' : ''}
        >
          <FiHeart /> {item.likes}
        </button>
        
        <button>
          <FiMessageCircle /> {item.comments}
        </button>
        
        <button>
          <FiShare2 />
        </button>
        
        <button 
          onClick={() => setSaved(!saved)}
          className={saved ? 'active' : ''}
        >
          <FiBookmark />
        </button>
      </div>
    </div>
  );
}

import {
  FiFile,
  FiFolder,
  FiFileText,
  FiImage,
  FiVideo,
  FiMusic,
  FiDownload,
  FiTrash2,
  FiShare2,
  FiMoreHorizontal
} from 'react-icons/fi';

function FileList({ files }) {
  const getFileIcon = (type) => {
    switch (type) {
      case 'folder': return FiFolder;
      case 'document': return FiFileText;
      case 'image': return FiImage;
      case 'video': return FiVideo;
      case 'audio': return FiMusic;
      default: return FiFile;
    }
  };
  
  return (
    <div className="file-list">
      {files.map(file => {
        const Icon = getFileIcon(file.type);
        
        return (
          <div key={file.id} className="file-item">
            <Icon className="file-icon" />
            <div className="file-info">
              <div className="file-name">{file.name}</div>
              <div className="file-meta">{file.size} • {file.date}</div>
            </div>
            <div className="file-actions">
              <button><FiDownload /></button>
              <button><FiShare2 /></button>
              <button><FiTrash2 /></button>
              <button><FiMoreHorizontal /></button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

Styling Feather Icons

Size and Color

import { FiHeart } from 'react-icons/fi';
import { IconContext } from 'react-icons';

function StyledIcons() {
  return (
    <div>
      {/* Inline styles */}
      <FiHeart 
        style={{ 
          fontSize: '32px', 
          color: '#e74c3c',
          strokeWidth: 1.5 
        }} 
      />
      
      {/* CSS classes (Tailwind) */}
      <FiHeart className="w-8 h-8 text-red-500" />
      
      {/* IconContext */}
      <IconContext.Provider 
        value={{ 
          size: '1.5em',
          color: '#3498db',
          className: 'feather-icon'
        }}
      >
        <FiHeart />
      </IconContext.Provider>
    </div>
  );
}

Custom Stroke Width

.feather-icon {
  stroke-width: 1.5;
}

.feather-icon-thin {
  stroke-width: 1;
}

.feather-icon-bold {
  stroke-width: 3;
}

Animations

import { FiRotateCw, FiHeart } from 'react-icons/fi';

function AnimatedIcons() {
  return (
    <div>
      {/* Spinning loader */}
      <FiRotateCw className="animate-spin" />
      
      {/* Pulse animation */}
      <FiHeart className="animate-pulse text-red-500" />
    </div>
  );
}

Icon Naming Convention

Feather icons use the Fi prefix followed by the icon name in PascalCase:

home → FiHome
user → FiUser
arrow-right → FiArrowRight
trash-2 → FiTrash2

Some icons have numbered variants (e.g., FiTrash2, FiShare2) to indicate design variations.

Popular Feather Icons

FiHome - Home
FiMenu - Menu/hamburger
FiX - Close/X
FiChevronDown - Dropdown
FiArrowLeft - Back arrow
FiSearch - Search
FiGrid - Dashboard/grid

Actions

FiPlus - Add
FiEdit / FiEdit2 / FiEdit3 - Edit variants
FiTrash / FiTrash2 - Delete
FiDownload - Download
FiUpload - Upload
FiShare / FiShare2 - Share
FiSave - Save
FiCopy - Copy

Status

FiCheckCircle - Success
FiAlertTriangle - Warning
FiInfo - Info
FiAlertCircle - Error
FiCheck - Checkmark
FiX - Error/close

Content

FiHeart - Like/favorite
FiStar - Rating
FiBookmark - Save
FiMessageCircle - Comment
FiMail - Email
FiPhone - Phone

Files

FiFile - Generic file
FiFileText - Document
FiFolder - Folder
FiImage - Image
FiVideo - Video
FiMusic - Audio

Design Philosophy

Feather icons follow these design principles:

Simplicity: Each icon is reduced to its minimal form
Consistency: 24x24 grid with 2px stroke width
Readability: Clear and legible at small sizes
Flexibility: Easy to customize and adapt

Use Cases

Feather icons are perfect for:

Minimal/Modern UIs: Clean design aesthetic
Dashboard interfaces: Professional look
Mobile applications: Clear at small sizes
SaaS products: Consistent and professional
Landing pages: Simple and elegant

Alternative: Lucide Icons

Lucide is a community-maintained fork of Feather with more icons:

import { LuHome, LuUser, LuSettings } from 'react-icons/lu';

function App() {
  return (
    <div>
      <LuHome />
      <LuUser />
      <LuSettings />
    </div>
  );
}

Lucide (lu) includes all Feather icons plus 1,200+ additional icons with the same design style.

Resources

Feather Icons Website

Browse and search all Feather icons

GitHub Repository

View source code and report issues

Lucide Icons

Extended version with 1,200+ icons

All Libraries

Explore other icon libraries

Get Started

Core Concepts

Guides

Icon Libraries

Feather Icons

Installation

Import Path

Library Details

Feather Icons

Key Features

Simple & Beautiful

Consistent Design

Highly Customizable

Open Source

Usage Examples

Basic Usage

Navigation

Action Buttons

Common Use Cases

Styling Feather Icons

Size and Color

Custom Stroke Width

Animations

Icon Naming Convention

Popular Feather Icons

Navigation

Actions

Status

Content

Files

Design Philosophy

Use Cases

Alternative: Lucide Icons

Resources

Feather Icons Website

GitHub Repository

Lucide Icons

All Libraries

​Installation

​Import Path

​Library Details

Feather Icons

​Key Features

Simple & Beautiful

Consistent Design

Highly Customizable

Open Source

​Usage Examples

​Basic Usage

​Navigation

​Action Buttons

​Common Use Cases

​Styling Feather Icons

​Size and Color

​Custom Stroke Width

​Animations

​Icon Naming Convention

​Popular Feather Icons

​Navigation

​Actions

​Status

​Content

​Files

​Design Philosophy

​Use Cases

​Alternative: Lucide Icons

​Resources

Feather Icons Website

GitHub Repository

Lucide Icons

All Libraries

Installation

Import Path

Library Details

Key Features

Usage Examples

Basic Usage

Navigation

Action Buttons

Common Use Cases

Styling Feather Icons

Size and Color

Custom Stroke Width

Animations

Icon Naming Convention

Popular Feather Icons

Navigation

Actions

Status

Content

Files

Design Philosophy

Use Cases

Alternative: Lucide Icons

Resources