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 { Music, Video } from "lucide-react";

function computeTooltipPlacement(
  anchor: DOMRect,
  tooltipWidth: number,
  tooltipHeight: number,
): { top: number; left: number; transform: string } {
  const pad = 10;
  const gap = 8;
  const vw = window.innerWidth;
  const tw = Math.max(tooltipWidth, 1);
  const th = Math.max(tooltipHeight, 1);

  const preferAbove = anchor.top - gap - th >= pad;
  const top = preferAbove ? anchor.top - gap : anchor.bottom + gap;

import { useState, useEffect, useRef, useMemo, useCallback } from "react";
import { motion, AnimatePresence } from "motion/react";
import { MoreVertical, Loader2, Trash2, Image as ImageIcon, Video, Volume2, VolumeX, Layers, Play, Music, FileText, FolderOutput, Shuffle, FolderOpen } 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 { deleteMediaAtPath } from "../deleteMedia";
import { openInFileManager } from "../openInFileManager";
import { releasePlaybackBeforeDelete } from "../releasePlaybackBeforeDelete";

Where it shows up

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