Phosphor Duotone Icon System
Tailwind text classes color both SVG layers via currentColor. Primary layer at full opacity, secondary at 20% (built into the SVG).
Color Preview
Pick a Tailwind text class to apply across all icons on this page.
colorClass="text-blue-600"
Buildings
Users
GearSix
Crown
Scales
Megaphone
Headset
ChartBar
ShieldCheck
Lightbulb
--duotone-fill-opacity: 15%
Buildings
Users
GearSix
Crown
Scales
Megaphone
Headset
ChartBar
ShieldCheck
Lightbulb
32px
Buildings @ 32px
Category Colors & Default Icons
Each category has a fixed Tailwind text class. These stay consistent regardless of theme.
Human Resources
الموارد البشرية
text-teal-600
Finance
المالية
text-amber-600
Engineering
الهندسة
text-blue-600
Sales
المبيعات
text-emerald-600
Marketing
التسويق
text-pink-600
Legal
الشؤون القانونية
text-slate-600
Operations
العمليات
text-orange-600
Support
الدعم
text-violet-600
Management
الإدارة
text-indigo-600
Information Technology
تكنولوجيا المعلومات
text-cyan-600
General
عام
text-gray-500
Theme Accent Fallback (Uncategorized)
No category = text-primary (theme accent via CSS variable).
Star
Lightbulb
Crown
Target
Rocket
Diamond
colorClass Override
Pass any Tailwind text class to override category colors.
text-rose-500
text-yellow-500
text-green-600
text-blue-600
Entity Default Icons (168 defaults across 13 entity types)
Departments
hr
finance
engineering
sales
marketing
legal
operations
support
management
it
general
logistics
research
compliance
procurement
quality
training
facilities
communications
strategy
Job Titles
ceo
cto
cfo
coo
cmo
clo
vp
director
manager
developer
designer
analyst
accountant
recruiter
lawyer
agent
coordinator
technician
consultant
architect
intern
admin
scientist
editor
trainer
Deals & Pipeline
new
qualified
proposal
negotiation
won
lost
stalled
renewal
upsell
pipeline
contract
invoice
commission
referral
Contacts & Leads
lead
prospect
customer
vendor
partner
referral
cold
warm
hot
converted
lost
vip
Customer Segments
enterprise
smb
individual
premium
starter
vip
churned
trial
loyal
wholesale
government
nonprofit
Properties
residential
commercial
industrial
land
apartment
villa
office
warehouse
retail
mixed
Workflows
approval
review
onboarding
offboarding
procurement
escalation
notification
sequential
parallel
conditional
timer
manual
SLAs
response
resolution
uptime
escalation
priority critical
priority high
priority medium
priority low
breached
met
at risk
Templates
email
sms
whatsapp
push
document
report
invoice
contract
newsletter
notification
Notifications
info
warning
error
success
reminder
mention
assignment
approval
system
broadcast
Settings
general
security
permissions
integrations
appearance
language
notifications
billing
storage
api
backup
advanced
Billing
subscription
invoice
payment
plan
trial
upgrade
downgrade
refund
usage
discount
Monitoring
health
cpu
memory
disk
network
queue
error
log
alert
uptime
getEntityIconDefault() Lookup
department.hr
jobTitle.ceo
deal.won
contact.vip
customerSegment.enterprise
sla.priority_critical
template.whatsapp
billing.subscription
monitoring.health
department.unknown_dept
PhosphorIconPicker (Context-Aware)
When a domain context is set, the picker shows that domain's curated icons first. "Show all groups" reveals the rest. "Browse all" loads the full ~1500 catalog.
Context:
Color:
Select an Icon
279 icons— Deals & Pipeline
Deals & Pipeline
Selected: Buildings
16px
20px
24px
32px
48px
64px
96px
128px
Invalid Icon Fallback
Invalid icon names gracefully fall back to CircleDashed.
"NonExistentIcon"
Empty string