@nice2dev/icons-media

React icon library for media, entertainment, creative, and multimedia applications.

Installation

pnpm add @nice2dev/icons-media

Features

• 🎬 60 Media Icons — Video, Audio, Creative, Entertainment
• 🎨 Variants — Filled, Outlined, Duotone styles
• ✨ Animations — 9 SMIL-based animations (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
• 📦 Tree-shakeable — Import only what you need
• 🔷 TypeScript — Full type definitions
• ⚛️ React 19 — Latest React support

Usage

import { PlayIcon, MusicIcon, CameraIcon, StarIcon } from '@nice2dev/icons-media';

function App() {
  return (
    <div>
      <PlayIcon size={24} color="#22c55e" />
      <MusicIcon variant="filled" accentColor="#8b5cf6" />
      <CameraIcon animation="pulse" />
      <StarIcon size={32} accentColor="#fbbf24" />
    </div>
  );
}

Available Icons

Video (15 icons)

| Icon | Component | | ------------------ | ---------------------- | | Play | PlayIcon | | Pause | PauseIcon | | Stop | StopIcon | | Fast Forward | FastForwardIcon | | Rewind | RewindIcon | | Skip Next | SkipNextIcon | | Skip Previous | SkipPreviousIcon | | Record | RecordIcon | | Video | VideoIcon | | Video Off | VideoOffIcon | | Screen | ScreenIcon | | Fullscreen | FullscreenIcon | | Picture in Picture | PictureInPictureIcon | | Captions | CaptionsIcon | | Replay | ReplayIcon |

Audio (15 icons)

| Icon | Component | | -------------- | ------------------- | | Music | MusicIcon | | Music Note | MusicNoteIcon | | Headphones | HeadphonesIcon | | Speaker | SpeakerIcon | | Speaker Mute | SpeakerMuteIcon | | Volume Up | VolumeUpIcon | | Volume Down | VolumeDownIcon | | Volume Mute | VolumeMuteIcon | | Microphone | MicrophoneIcon | | Microphone Off | MicrophoneOffIcon | | Podcast | PodcastIcon | | Radio | RadioIcon | | Equalizer | EqualizerIcon | | Playlist | PlaylistIcon | | Shuffle | ShuffleIcon |

Creative (15 icons)

| Icon | Component | | ------------ | ------------------ | | Camera | CameraIcon | | Camera Off | CameraOffIcon | | Image | ImageIcon | | Gallery | GalleryIcon | | Film | FilmIcon | | Filmstrip | FilmstripIcon | | Clapperboard | ClapperboardIcon | | Director | DirectorIcon | | Palette | PaletteIcon | | Brush | BrushIcon | | Pen | PenIcon | | Pencil | PencilIcon | | Eraser | EraserIcon | | Color Picker | ColorPickerIcon | | Layers | LayersIcon |

Entertainment (15 icons)

| Icon | Component | | --------- | --------------- | | Gamepad | GamepadIcon | | Joystick | JoystickIcon | | Trophy | TrophyIcon | | Medal | MedalIcon | | Star | StarIcon | | Heart | HeartIcon | | Ticket | TicketIcon | | Theater | TheaterIcon | | Popcorn | PopcornIcon | | TV | TVIcon | | Stream | StreamIcon | | Live | LiveIcon | | Broadcast | BroadcastIcon | | Antenna | AntennaIcon | | Satellite | SatelliteIcon |

Props

| Prop | Type | Default | Description | | ------------- | ------------------------------------- | ---------------- | ----------------------- | | size | number | 24 | Icon size in pixels | | color | string | 'currentColor' | Primary icon color | | accentColor | string | — | Secondary/accent color | | variant | 'filled' \| 'outlined' \| 'duotone' | 'outlined' | Icon style variant | | animation | MediaIconAnimation | — | Animation type | | className | string | — | CSS class name | | style | CSSProperties | — | Inline styles | | ...props | SVGProps | — | Any valid SVG attribute |

Animations

import { PlayIcon } from '@nice2dev/icons-media';

// Available animations
<PlayIcon animation="pulse" />   // Opacity pulse
<PlayIcon animation="grow" />    // Scale grow
<PlayIcon animation="shake" />   // Horizontal shake
<PlayIcon animation="spin" />    // 360° rotation
<PlayIcon animation="bounce" />  // Vertical bounce
<PlayIcon animation="fade" />    // Fade in/out
<PlayIcon animation="flip" />    // Y-axis flip
<PlayIcon animation="slide" />   // Horizontal slide
<PlayIcon animation="glow" />    // Glow effect

Icon Collections

import { videoIcons, audioIcons, creativeIcons, entertainmentIcons, allMediaIcons } from '@nice2dev/icons-media';

// Use collections for dynamic rendering
Object.entries(videoIcons).map(([name, Icon]) => <Icon key={name} size={24} />);

Custom Icons

Create custom media icons using the factory:

import { createMediaIcon } from '@nice2dev/icons-media';

const CustomPlayIcon = createMediaIcon(
  ({ color, variant }) => (
    <polygon points="5,3 19,12 5,21" fill={variant === 'filled' ? color : 'none'} stroke={color} strokeWidth="2" />
  ),
  { displayName: 'CustomPlayIcon' },
);

License

MIT © Nice2Dev