Icons
Design Better uses Phosphor Icons — a flexible, consistent icon family with multiple weights. Use regular weight for inactive states and bold for active or selected states.
✦
Phosphor Icons
By Helena Zhang & Tobias Fried. MIT License. Install via @phosphor-icons/react. Use the weight prop to switch between thin, light, regular, bold, fill, and duotone styles.
Navigation & UI
House
MagnifyingGlass
List
X
DotsThree
DotsThreeVertical
CaretDown
CaretUp
CaretLeft
CaretRight
ArrowLeft
ArrowRight
ArrowUp
ArrowDown
ArrowLineUpRight
Funnel
SlidersHorizontal
GridFour
Playback & Audio
Play
Pause
Stop
FastForward
Rewind
Repeat
Shuffle
SpeakerHigh
SpeakerLow
SpeakerSlash
Headphones
Microphone
Content & Media
BookOpen
Newspaper
Video
Article
Image
FileText
Folder
Globe
Link
Hash
Actions
Plus
Minus
Check
Download
Upload
Share
Copy
Trash
PencilSimple
Status & Feedback
Info
Warning
WarningCircle
CheckCircle
XCircle
Question
Interface
Bell
Envelope
Star
Heart
Bookmark
Clock
Calendar
User
Users
Tag
System
Palette
TextT
Ruler
Wind
PuzzlePiece
Swatches
Eye
Robot
Sun
Moon
Monitor
Usage
import { Play, Pause } from "@phosphor-icons/react";
// Regular (inactive)
<Play size={20} weight="regular" />
// Bold (active / selected)
<Play size={20} weight="bold" />
// Fill (strong emphasis)
<Play size={20} weight="fill" />