or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-react-feather

React component library providing 287 SVG icon components based on Feather Icons with customizable size and color props.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-feather@2.0.x

To install, run

npx @tessl/cli install tessl/npm-react-feather@2.0.0

index.mddocs/

React Feather

React Feather is a React component library providing 287 individual SVG icon components based on Feather Icons v4.29.0. Each icon is designed on a 24x24 grid with emphasis on simplicity, consistency, and readability, offering customizable color and size properties.

Package Information

  • Package Name: react-feather
  • Package Type: npm
  • Language: JavaScript with TypeScript definitions
  • Installation: npm install react-feather or yarn add react-feather

Core Imports

import { Camera, Heart, Search } from "react-feather";

For TypeScript:

import { Camera, Heart, Search, IconProps } from "react-feather";

Wildcard import:

import * as Icon from "react-feather";
// Usage: <Icon.Camera />

Individual component imports:

import Camera from "react-feather/dist/icons/camera";

CommonJS:

const { Camera, Heart, Search } = require("react-feather");
// Or individual: const Camera = require("react-feather/dist/icons/camera").default;

Basic Usage

import React from "react";
import { Camera, Heart, Search, Settings } from "react-feather";

function App() {
  return (
    <div>
      {/* Basic usage with default props */}
      <Camera />
      
      {/* Customized size and color */}
      <Heart color="red" size={48} />
      
      {/* Using with additional SVG attributes */}
      <Search 
        color="#007bff" 
        size={24} 
        strokeWidth={3}
        className="search-icon"
        onClick={() => console.log("Search clicked")}
      />
      
      {/* Using wildcard import */}
      <Icon.Settings size="2em" color="currentColor" />
    </div>
  );
}

Architecture

React Feather follows a consistent architecture pattern:

  • Component Pattern: All icons are React functional components created with forwardRef for ref forwarding
  • Props Interface: Unified IconProps interface extending SVGAttributes<SVGElement>
  • Default Values: Consistent defaults (color: "currentColor", size: 24)
  • Type Safety: Full TypeScript support with proper type definitions
  • Tree Shaking: Individual component imports support tree shaking
  • PropTypes: Runtime validation for JavaScript usage

Capabilities

Icon Components

React Feather provides 287 icon components, each following the same API pattern. All icons accept the same props and behave consistently.

interface IconProps extends SVGAttributes<SVGElement> {
  /** Icon color, defaults to 'currentColor' */
  color?: string;
  /** Icon size (width and height), defaults to 24 */
  size?: string | number;
}

type Icon = React.FC<IconProps>;

Complete Icon List

All 287 available icon components:

// Activity & Status Icons
export const Activity: Icon;
export const AlertCircle: Icon;
export const AlertOctagon: Icon;
export const AlertTriangle: Icon;
export const Award: Icon;
export const Bell: Icon;
export const BellOff: Icon;
export const CheckCircle: Icon;
export const CheckSquare: Icon;
export const Check: Icon;
export const Clock: Icon;
export const HelpCircle: Icon;
export const Info: Icon;
export const Loader: Icon;
export const MinusCircle: Icon;
export const MinusSquare: Icon;
export const Minus: Icon;
export const PlusCircle: Icon;
export const PlusSquare: Icon;
export const Plus: Icon;
export const Power: Icon;
export const RefreshCcw: Icon;
export const RefreshCw: Icon;
export const RotateCcw: Icon;
export const RotateCw: Icon;
export const Shield: Icon;
export const ShieldOff: Icon;
export const StopCircle: Icon;
export const XCircle: Icon;
export const XOctagon: Icon;
export const XSquare: Icon;
export const X: Icon;
export const Zap: Icon;
export const ZapOff: Icon;

// Navigation & Direction Icons
export const ArrowDown: Icon;
export const ArrowDownCircle: Icon;
export const ArrowDownLeft: Icon;
export const ArrowDownRight: Icon;
export const ArrowLeft: Icon;
export const ArrowLeftCircle: Icon;
export const ArrowRight: Icon;
export const ArrowRightCircle: Icon;
export const ArrowUp: Icon;
export const ArrowUpCircle: Icon;
export const ArrowUpLeft: Icon;
export const ArrowUpRight: Icon;
export const ChevronDown: Icon;
export const ChevronLeft: Icon;
export const ChevronRight: Icon;
export const ChevronUp: Icon;
export const ChevronsDown: Icon;
export const ChevronsLeft: Icon;
export const ChevronsRight: Icon;
export const ChevronsUp: Icon;
export const CornerDownLeft: Icon;
export const CornerDownRight: Icon;
export const CornerLeftDown: Icon;
export const CornerLeftUp: Icon;
export const CornerRightDown: Icon;
export const CornerRightUp: Icon;
export const CornerUpLeft: Icon;
export const CornerUpRight: Icon;
export const ExternalLink: Icon;
export const Link: Icon;
export const Link2: Icon;
export const MousePointer: Icon;
export const Move: Icon;
export const Navigation: Icon;
export const Navigation2: Icon;

// Media & Playback Icons
export const FastForward: Icon;
export const Film: Icon;
export const Music: Icon;
export const Pause: Icon;
export const PauseCircle: Icon;
export const Play: Icon;
export const PlayCircle: Icon;
export const Radio: Icon;
export const Repeat: Icon;
export const Rewind: Icon;
export const Shuffle: Icon;
export const SkipBack: Icon;
export const SkipForward: Icon;
export const Speaker: Icon;
export const Volume: Icon;
export const Volume1: Icon;
export const Volume2: Icon;
export const VolumeX: Icon;

// Communication Icons
export const AtSign: Icon;
export const Mail: Icon;
export const MessageCircle: Icon;
export const MessageSquare: Icon;
export const Mic: Icon;
export const MicOff: Icon;
export const Phone: Icon;
export const PhoneCall: Icon;
export const PhoneForwarded: Icon;
export const PhoneIncoming: Icon;
export const PhoneMissed: Icon;
export const PhoneOff: Icon;
export const PhoneOutgoing: Icon;
export const Send: Icon;
export const Voicemail: Icon;

// File & Document Icons
export const Archive: Icon;
export const Book: Icon;
export const BookOpen: Icon;
export const Bookmark: Icon;
export const Clipboard: Icon;
export const Copy: Icon;
export const File: Icon;
export const FileMinus: Icon;
export const FilePlus: Icon;
export const FileText: Icon;
export const Folder: Icon;
export const FolderMinus: Icon;
export const FolderPlus: Icon;
export const Paperclip: Icon;
export const Save: Icon;

// Editing & Text Icons
export const Bold: Icon;
export const Code: Icon;
export const Edit: Icon;
export const Edit2: Icon;
export const Edit3: Icon;
export const Italic: Icon;
export const PenTool: Icon;
export const Scissors: Icon;
export const Type: Icon;
export const Underline: Icon;

// Layout & Design Icons
export const AlignCenter: Icon;
export const AlignJustify: Icon;
export const AlignLeft: Icon;
export const AlignRight: Icon;
export const Columns: Icon;
export const Grid: Icon;
export const Hash: Icon;
export const Layout: Icon;
export const List: Icon;
export const Menu: Icon;
export const MoreHorizontal: Icon;
export const MoreVertical: Icon;
export const Sidebar: Icon;
export const Sliders: Icon;
export const Table: Icon;

// Technology & Devices Icons
export const Airplay: Icon;
export const Battery: Icon;
export const BatteryCharging: Icon;
export const Bluetooth: Icon;
export const Camera: Icon;
export const CameraOff: Icon;
export const Cast: Icon;
export const Chrome: Icon;
export const Command: Icon;
export const Cpu: Icon;
export const Database: Icon;
export const Disc: Icon;
export const HardDrive: Icon;
export const Headphones: Icon;
export const Monitor: Icon;
export const Printer: Icon;
export const Server: Icon;
export const Smartphone: Icon;
export const Tablet: Icon;
export const Terminal: Icon;
export const Tv: Icon;
export const Watch: Icon;
export const Wifi: Icon;
export const WifiOff: Icon;

// Business & Finance Icons
export const Briefcase: Icon;
export const CreditCard: Icon;
export const DollarSign: Icon;
export const Package: Icon;
export const ShoppingBag: Icon;
export const ShoppingCart: Icon;
export const Tag: Icon;
export const Truck: Icon;

// Social & Brand Icons
export const Codepen: Icon;
export const Codesandbox: Icon;
export const Dribbble: Icon;
export const Facebook: Icon;
export const Figma: Icon;
export const Framer: Icon;
export const GitHub: Icon;
export const Gitlab: Icon;
export const Instagram: Icon;
export const Linkedin: Icon;
export const Pocket: Icon;
export const Rss: Icon;
export const Slack: Icon;
export const Trello: Icon;
export const Twitch: Icon;
export const Twitter: Icon;
export const Youtube: Icon;

// Tools & Objects Icons
export const Anchor: Icon;
export const Aperture: Icon;
export const Box: Icon;
export const Calendar: Icon;
export const Coffee: Icon;
export const Compass: Icon;
export const Crop: Icon;
export const Crosshair: Icon;
export const Delete: Icon;
export const Feather: Icon;
export const Filter: Icon;
export const Flag: Icon;
export const Gift: Icon;
export const Key: Icon;
export const Layers: Icon;
export const LifeBuoy: Icon;
export const Lock: Icon;
export const Search: Icon;
export const Settings: Icon;
export const Tool: Icon;
export const Trash: Icon;
export const Trash2: Icon;
export const Umbrella: Icon;
export const Unlock: Icon;

// Weather & Nature Icons
export const Cloud: Icon;
export const CloudDrizzle: Icon;
export const CloudLightning: Icon;
export const CloudOff: Icon;
export const CloudRain: Icon;
export const CloudSnow: Icon;
export const Droplet: Icon;
export const Moon: Icon; 
export const Sun: Icon;
export const Sunrise: Icon;
export const Sunset: Icon;
export const Thermometer: Icon;
export const Wind: Icon;

// Charts & Data Icons
export const BarChart: Icon;
export const BarChart2: Icon;
export const PieChart: Icon;
export const TrendingDown: Icon;
export const TrendingUp: Icon;

// User & People Icons
export const User: Icon;
export const UserCheck: Icon;
export const UserMinus: Icon;
export const UserPlus: Icon;
export const Users: Icon;
export const UserX: Icon;

// Emotions & Expressions Icons
export const Frown: Icon;
export const Heart: Icon;
export const Meh: Icon;
export const Smile: Icon;
export const ThumbsDown: Icon;
export const ThumbsUp: Icon;

// Geographic & Location Icons
export const Globe: Icon;
export const Home: Icon;
export const Map: Icon;
export const MapPin: Icon;
export const Target: Icon;

// Math & Symbols Icons
export const Circle: Icon;
export const Divide: Icon;
export const DivideCircle: Icon;
export const DivideSquare: Icon;
export const Hexagon: Icon;
export const Octagon: Icon;
export const Percent: Icon;
export const Square: Icon;
export const Star: Icon;
export const Triangle: Icon;

// Actions & Controls Icons
export const Download: Icon;
export const DownloadCloud: Icon;
export const Eye: Icon;
export const EyeOff: Icon;
export const Image: Icon;
export const Inbox: Icon;
export const LogIn: Icon;
export const LogOut: Icon;
export const Maximize: Icon;
export const Maximize2: Icon;
export const Minimize: Icon;
export const Minimize2: Icon;
export const Share: Icon;
export const Share2: Icon;
export const Slash: Icon;
export const ToggleLeft: Icon;
export const ToggleRight: Icon;
export const Upload: Icon;
export const UploadCloud: Icon;
export const Video: Icon;
export const VideoOff: Icon;
export const ZoomIn: Icon;
export const ZoomOut: Icon;

// Git & Version Control Icons
export const GitBranch: Icon;
export const GitCommit: Icon;
export const GitMerge: Icon;
export const GitPullRequest: Icon;

Component Properties

Each icon component accepts these properties:

interface IconProps extends SVGAttributes<SVGElement> {
  /** 
   * Icon stroke color
   * @default "currentColor" 
   */
  color?: string;
  
  /** 
   * Icon size for both width and height
   * @default 24 
   */
  size?: string | number;
  
  // All standard SVG attributes are also supported:
  className?: string;
  style?: React.CSSProperties;
  onClick?: (event: React.MouseEvent<SVGElement>) => void;
  strokeWidth?: string | number;
  fill?: string;
  // ... and all other SVGAttributes<SVGElement>
}

Usage Patterns

Basic Icon Usage:

import { Camera, Settings, User } from "react-feather";

function Navigation() {
  return (
    <nav>
      <Camera />
      <Settings />
      <User />
    </nav>
  );
}

Customizing Icons:

import { Heart, Search, AlertCircle } from "react-feather";

function CustomIcons() {
  return (
    <div>
      {/* Custom color and size */}
      <Heart color="#ff6b6b" size={32} />
      
      {/* Using CSS units for size */}
      <Search size="1.5rem" color="var(--primary-color)" />
      
      {/* Additional SVG attributes */}
      <AlertCircle 
        size={24}
        color="orange"
        strokeWidth={3}
        className="warning-icon"
        aria-label="Warning"
      />
    </div>
  );
}

Ref Forwarding:

import React, { useRef } from "react";
import { Download } from "react-feather";

function RefExample() {
  const iconRef = useRef<SVGSVGElement>(null);
  
  const handleClick = () => {
    if (iconRef.current) {
      iconRef.current.style.transform = "rotate(180deg)";
    }
  };
  
  return (
    <Download 
      ref={iconRef}
      size={24}
      onClick={handleClick}
    />
  );
}

Wildcard Import Pattern:

import * as Icons from "react-feather";

const iconMap = {
  camera: Icons.Camera,
  heart: Icons.Heart,
  search: Icons.Search,
};

function DynamicIcon({ name, ...props }) {
  const IconComponent = iconMap[name];
  return IconComponent ? <IconComponent {...props} /> : null;
}

TypeScript Integration

React Feather provides complete TypeScript support:

import { FC, SVGAttributes } from 'react';

interface IconProps extends SVGAttributes<SVGElement> {
  color?: string;
  size?: string | number;
}

type Icon = FC<IconProps>;

TypeScript Usage Examples:

import React from "react";
import { Camera, IconProps } from "react-feather";

// Using IconProps interface
const CustomIcon: React.FC<IconProps> = (props) => {
  return <Camera {...props} />;
};

// Type-safe event handling
const handleIconClick = (event: React.MouseEvent<SVGElement>) => {
  console.log("Icon clicked:", event.currentTarget);
};

function TypeSafeComponent() {
  return (
    <Camera 
      size={24}
      color="blue"
      onClick={handleIconClick}
    />
  );
}

Error Handling

React Feather components are designed to be robust:

  • Invalid props: Invalid values for size or color will fall back to defaults
  • Missing imports: Importing non-existent icons will result in build-time errors with TypeScript
  • Runtime validation: PropTypes provide runtime validation in development mode

Performance Considerations

  • Tree Shaking: Use named imports to enable tree shaking and reduce bundle size
  • Individual Imports: Import specific icons to minimize bundle size
  • SVG Rendering: Icons are rendered as inline SVG elements for optimal performance
  • No External Dependencies: Only requires React and prop-types (for validation)

Browser Compatibility

React Feather icons work in all modern browsers that support:

  • SVG rendering
  • React 16.8.6 or higher
  • ES5+ JavaScript features

The library has no additional polyfill requirements and works with server-side rendering.