Icons
A collection of icons used throughout the Delphi design system.
The Delphi icon library provides consistent iconography across the platform. Click any icon to copy its import name.
365 icons available. Click to copy import name.
Actions
ActionsSolid
ApiConnection
Archive1
ArrowCircle
ArrowClockwise
ArrowCornerUpRight
ArrowCounterClockwise
ArrowDown
ArrowFill
ArrowLeft
ArrowLeftRight
ArrowOutOfBox
ArrowRepeatRight
ArrowRight
ArrowsCircle
ArrowsRightLeft
ArrowTriangleRight
ArrowUndo
ArrowUp
ArrowUpRight
ArrowWallLeft
Ascending
Asterisk
At
AtSymbol
AutoSize
Bars2
Bars3
Bars
Basket
BatteryError
BellAlarm
BellOff
Blackpoint
BlackpointSolid
Blossom
Bold
Book
Box
Brackets2
Brain
Branch
Broadcasts
BroadcastsSolid
BubbleAnnotate
BubbleCrossed
BubbleWide
Bug
Buildings
BulletList
CalendarDays
Calendar
CalendarRepeat
CalendarSearch
CallCancel
Call
Card
CaseSensitive
ChainLink
Chart6
ChatAlt
ChatAltSolid
Chat
ChatWithoutDots
Checklist
Checkmark
ChevronSmall
ChevronUpDown
CircleCheck
CircleCross
CircleDashed
Circle
CircleInfo
CircleMinus
CirclePlus
CircleQuestionMark
CircleRecord
Clock
ClockSolid
CloseQuote
CloudDownload
Cloud
CloudUpload
Code
CompassRound
Components
Content
Contract
Conversations
ConversationsSolid
CreditCard
CrossLarge
CrossSmall
CubeTransparent
DelphiCurrent
DelphiLarge
DelphiParker
DelphiTobias
Descending
DialogBubblesCheckmark
DialogBubbles
Discord
DoctypeCode
DoctypeDOC
DoctypeEmail
DoctypeEPUB
DoctypeEvernote
DoctypeFacebook
DoctypeFolder
DoctypeFolderSmall
DoctypeGridView
DoctypeImage
DoctypeInstagram
DoctypeLinkedin
DoctypeListView
DoctypeManual
DoctypeMD
DoctypeNotion
DoctypePDF
DoctypePodcast
DoctypeRTF
DoctypeSlack
DoctypeSlide
DoctypeSpreadsheet
DoctypeTikTok
DoctypeTXT
DoctypeVideo
DoctypeVoice
DoctypeWebsite
DoctypeX
DoctypeYouTube
Document
DocumentSparkle
DollarSign
Download
DragHandle
Dropbox
Email
EmailSettings
Entrance
Evernote
Exit
Expand
ExpandSimple
EyeClosed
EyeDropper
EyeOpen
Facebook
Fashion
Feature
FileArrowUp
File
FileMagnifyingGlass
Filter2
Filter
Fingerprint
Flick
FocusMagic
Folder
Fullscreen
getDoctype
getDoctypeIconByFilename
getDoctypeIconByType
Ghost
Gift1
Gift
GiftIconSolid
Globus
GlobusIconFilled
GoDaddy
GoogleCalendar
GoogleDrive
Google
GraduationCap
Growth
H1
H2
H3
Hammer
Hashtag
HD
Heart
Highlight
History
Home
Hourglass
Image
Images3
Images4
Images4Solid
ImagesCircle
ImagesCircleSolid
Import
InboxEmpty
Indeterminate
Infinity
Instagram
Instance
Integrations
IntegrationsSolid
Intersect
Italic
Kajabi
Key
LayoutDashboard
Limit
LinkedIn
ListSparkle
Live
LoadingCircle
LocationPin
LockEmpty
Lock
Logo
MagnifyingGlass
Map
Medal
Medium
MicrophoneOff
MicrophoneOn
MicrosoftOutlook
MightyNetworks
Mind
MindSolid
MinusLarge
Monetization
MonetizationSolid
Moon
Multimedia
MultimediaSolid
Mute
MuteSolid
NewFeature
Note
Notification
NotificationSolid
Notion
NumberedList
OneDrive
Palette
Paperclip
Pause
Pencil
PeopleAdd
People
PeopleSolid
Phone
Pin
Placeholder
Playground
PlaygroundSolid
Play
PlusLarge
PlusSmall
Podcast
Processing
Products
ProductsSolid
Profile
ProfileNoCircle
ProfileSolid
Prompt
QRCode
Rainbow
RectangleGroup
RectangleStack
Reorder
RescueRing
Retouch
RetouchSolid
Robot
Rss
ScreenRecord
SettingsGear3
Settings
Share
ShareRight
ShieldCheck
Shield
ShoppingBag
Sidebar
SignalApp
Signal
Sketchbook
Skip
Slack
SlackLarge
SlackSmall
Sleep
SlidesWideAdd
Social
Sparkles2
SquareBehindSquare
SquarePlus
Star
StarLines
StepBack
StepForward
Stop
Stopwatch
SubscriptionStar
SubscriptionTick
Substack
Sun
Support
Switch
Tactics
Tag
TargetArrow
Target
Team
TextEdit
Thinkific
ThreeDots
ThreeDotsVertical
ThumbDown
ThumbUp
Ticket
Tiers
TiersSolid
TikTok
Transcript
Translate
Trash
TriangleExclamation
Unblur
Underline
Upload
UserCircle
User
UserMinus
UserPlus
Users
UserSolid
Variables
Verified
Video
VideoOff
VideoOn
VideoSolid
Vimeo
Voice1
VoiceAndVideo
Voice
VoiceSolid
VolumeFull
VolumeFullSolid
VolumeHalf
VolumeMinimum
VolumeMinimumSolid
VolumeOff
VolumeOffSolid
WhatsApp
Whiteboard
WindowApp
WindowSparkle
Wip
Wix
Wreath
Write
X
Youtube
Zap
Zoom
Usage
import { StarIcon, HeartIcon, CheckmarkIcon } from "@delphi/ui";
export function Example() {
return (
<div className="flex gap-2">
<StarIcon className="size-5" />
<HeartIcon className="size-5" />
<CheckmarkIcon className="size-5" />
</div>
);
}Sizing
Icons use the size-* utility class for consistent sizing:
<StarIcon className="size-4" /> {/* 16px */}
<StarIcon className="size-5" /> {/* 20px */}
<StarIcon className="size-6" /> {/* 24px */}Colors
Icons inherit their color from the parent element's color property:
<StarIcon className="size-5 text-stone-12" />
<StarIcon className="size-5 text-tangerine-9" />
<StarIcon className="size-5 text-red-9" />Use consistent icon sizes within the same context
Pair icons with text labels for clarity when possible
Use
aria-label for icon-only buttonsImport icons from
@delphi/ui — never from external librariesMix icon styles (solid vs outline) inconsistently
Use icons that are too small to be recognizable (below 16px)
Import icons from lucide-react, heroicons, or other external libraries