IFFDAYIFFDAYDesign
Foundations

Icons

Lucide icons, listed as the Web app imports them.

The icon set

Every icon comes from Lucide (lucide-react): outlined, a 2px stroke with round ends, close to the stroke weight of Archivo. Below are the 70 icons that 25 files in apps/web import, counted from the source when this site was built; hover an icon to see the files.

Activity1AlertTriangle1ArrowDown1ArrowRight1ArrowUp1ArrowUpRight8BadgeCheck1Bell1BookmarkPlus1BookOpen1CalendarCheck1CalendarClock1CalendarDays5CalendarPlus2Check4ChevronDown2ChevronRight6Copy2Database1Download2Ellipsis2Eye1EyeOff1FileCheck1FilePen5FileText1Film4Flag1Globe3Heart5History1Inbox1Link22List1ListPlus1ListVideo1Lock5LockOpen1LogOut1MailOpen1MapPin3MessageCircle2MessageSquare1Move1Paperclip1Pencil2PenLine2Plus7RefreshCw1RotateCcw2Save2Search5Send4Settings1Share24Shield1ShieldCheck1Sparkles1Star1ThumbsDown2ThumbsUp2Ticket2Trash24Trophy2User1UserRound1Users4UsersRound2Wheat1X3

Sizes

  • 16px is the most common: action panel rows, menu items, the actions on a review.
  • 15px goes in buttons and small controls such as Like; 14px in tighter inline spots.
  • 18px goes in the 34px icon-button.
  • 22px is for Watched, Watchlist and Add to plan on film pages and for the community page tiles, whose stroke is thinned to 1.6px.

Usage

  • Import icons by name, import { Heart } from 'lucide-react', so the bundle carries only the icons in use.
  • Icons take the text color (currentColor). A heart that means selected is filled with fill="currentColor".
  • An icon-only button needs an aria-label. An icon beside text is decoration and can take aria-hidden="true"; this version of Lucide does not add it.