> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/react-icons/react-icons/llms.txt
> Use this file to discover all available pages before exploring further.

# Feather Icons

> Use 280+ simple and beautiful Feather icons in your React application

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:

```bash theme={null}
npm install react-icons
```

## Import Path

```jsx theme={null}
import { FiHome, FiUser, FiSettings } from 'react-icons/fi';
```

## Library Details

<Card title="Feather Icons">
  **Icon Count:** 287

  **Version:** 4.29.1

  **Import:** `react-icons/fi`

  **Prefix:** `Fi`

  **License:** [MIT License](https://github.com/feathericons/feather/blob/master/LICENSE)

  **Project:** [feathericons.com](https://feathericons.com/)
</Card>

## Key Features

<CardGroup cols={2}>
  <Card title="Simple & Beautiful" icon="heart">
    Clean, minimalist design that works in any project
  </Card>

  <Card title="Consistent Design" icon="grid">
    All icons designed on 24x24 grid with 2px stroke
  </Card>

  <Card title="Highly Customizable" icon="palette">
    Easy to customize size, color, and stroke width
  </Card>

  <Card title="Open Source" icon="code">
    MIT licensed and free for any use
  </Card>
</CardGroup>

## Usage Examples

### Basic Usage

```jsx theme={null}
import { FiHome, FiUser, FiSettings } from 'react-icons/fi';

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

### Navigation

```jsx theme={null}
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

```jsx theme={null}
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

<Tabs>
  <Tab title="Forms">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Alerts & Messages">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="Cards & Lists">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>

  <Tab title="File Management">
    ```jsx theme={null}
    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>
      );
    }
    ```
  </Tab>
</Tabs>

## Styling Feather Icons

### Size and Color

```jsx theme={null}
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

```css theme={null}
.feather-icon {
  stroke-width: 1.5;
}

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

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

### Animations

```jsx theme={null}
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`

<Note>
  Some icons have numbered variants (e.g., `FiTrash2`, `FiShare2`) to indicate design variations.
</Note>

## Popular Feather Icons

### Navigation

* `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:

1. **Simplicity**: Each icon is reduced to its minimal form
2. **Consistency**: 24x24 grid with 2px stroke width
3. **Readability**: Clear and legible at small sizes
4. **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:

```jsx theme={null}
import { LuHome, LuUser, LuSettings } from 'react-icons/lu';

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

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

## Resources

<CardGroup cols={2}>
  <Card title="Feather Icons Website" icon="link" href="https://feathericons.com/">
    Browse and search all Feather icons
  </Card>

  <Card title="GitHub Repository" icon="github" href="https://github.com/feathericons/feather">
    View source code and report issues
  </Card>

  <Card title="Lucide Icons" icon="wand-magic-sparkles" href="https://lucide.dev/">
    Extended version with 1,200+ icons
  </Card>

  <Card title="All Libraries" icon="layer-group" href="/icon-libraries/all-libraries">
    Explore other icon libraries
  </Card>
</CardGroup>