Lucide Icons

Lucide React icons are the default glyph set for downloader, library, player, settings, and queue UI.

Each file imports named icons from lucide-react (Music, Video, Trash2, Play, etc.). Vite tree-shakes unused exports, so importing fifteen icons in DownloadJobQueuePanel.tsx does not bundle the whole library.

Queue rows use Music/Video toggles for per-job audio mode. Library cards show a Music pill badge on audio-only files. Player dock uses Play/Pause, skip, volume tiers, and Ellipsis for the More menu. Settings trees use chevrons for collapse. Updater overlay uses Loader2 while downloading.

Sizing is consistent: h-4 w-4 or size={16} on dense rows, slightly larger on primary player actions. Icon color inherits from Tailwind text utilities or explicit accent classes.

The marketing site also depends on lucide-react for newer nav pieces. Older site chrome still uses Iconify or inline SVG where it predates Lucide.

In the repo

import {
  Clock,
  Pause,
  Play,
  RefreshCw,
  Trash2,
  ChevronUp,
  ChevronDown,
  Loader2,
  CheckCircle2,
  AlertCircle,
  Library,
  Music,
  Video,
} from "lucide-react";

import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "motion/react";
import { MoreVertical, Loader2, Trash2, Image as ImageIcon, Video, Volume2, VolumeX, Layers, Play, Music, FileText } from "lucide-react";
import { copyTranscriptForFile, type TranscriptVariant } from "../copyTranscript";
import { isAudioOnlyPath } from "../mediaKind";
import { invoke, convertFileSrc } from "@tauri-apps/api/core";
import { askConfirm } from "./ConfirmDialog";
import { MediaFile, GalleryEntry, PlaylistCollection } from "../types";
import { getPlaybackThumbnailBar, getWatchProgress, isVideoWatched } from "../playbackStorage";
import { formatStorageSize } from "../formatStorageSize";
import { clearPlaybackStateForDeletedPaths } from "../cleanupCandidates";
import { releasePlaybackBeforeDelete } from "../releasePlaybackBeforeDelete";
import { useRuforgeStore } from "../store/ruforgeStore";
import { formatDuration } from "./downloader/downloaderFormat";

Where it shows up

DownloadJobQueuePanel.tsx, DownloaderView.tsx, MediaView.tsx
PlayerView.tsx, SponsorBlockSettingsTree.tsx, UpdaterLayers.tsx
Website lucide-react in header/nav where added