Overview
Font Awesome 7 Pro Duotone Regular icons provide a consistent visual language across the platform. Icons are paired with vocabulary terms for predictable meaning.
Key Features
- Duotone Regular style for modern, clean appearance
- Icon wrapper component with branded and custom color modes
- IconPicker component for user-selectable icons
- Standard icons mapped to vocabulary terms
Action Icons
Icons paired with standard vocabulary terms
New
Create from scratch
Add
Attach to existing
Edit
Modify content
Delete
Permanent removal
Remove
Detach from list
Save
Persist locally
Submit
Send for processing
Cancel
Dismiss, close
View
Preview content
Show
Reveal content
Hide
Collapse content
Search
Find items
Filter
Narrow results
Settings
Configuration
Help
Documentation
Duplicate
Clone item
Refresh
Reload data
Export
Download data
Import
Upload data
Confirm
Approve action
Continue
Next step
Back
Previous step
Done
Complete task
Platform Icons
Core platform concepts
Home
Dashboard, home navigation
User
User profile, account
Users
Team, participants
Program
Testing programs
Project
Projects
Survey
Surveys, questionnaires
Task
Tasks, activities
Feedback
Feedback, comments
Resource
Resources, documents
Tag
Tags, labels
Calendar
Dates, schedules
Analytics
Reports, metrics
Notification
Alerts
Messages
AI
AI features
State Icons
Feedback indicators
Loading
Async operations
Success
Completed actions
Error
Failed operations
Warning
Caution alerts
Info
Helpful hints
Navigation Icons
UI navigation elements
Menu
Mobile navigation
Expand
Dropdowns, accordions
Forward
Breadcrumbs, lists
Back
Return navigation
More
Overflow actions
External
External links
User Role Icons
Standardized icons for user role badges and indicators
These icons are defined in @/ui/config/roles.ts and are the single source of truth for role visual styling. All role-related UI should use these icons.
Super Admin
faUserSecret
Owner
faUserShield
Builder
faUserCog
Participant
faUserCheck
Public
faGlobe
Import: import { ROLE_VISUAL_CONFIG } from '@/ui/config/roles'
IconPicker Component
User-selectable icon component
Click to open the icon picker dialog. Search by keyword or browse by category.
Usage Examples
Import Pattern
import { Icon } from '@/ui/icons';
import { faUser, faSparkles } from '@fortawesome/duotone-regular-svg-icons';
// Basic usage
<Icon icon={faUser} className="text-base" />
// Branded mode (uses design tokens)
<Icon icon={faSparkles} branded className="text-lg" />
// Custom colors
<Icon
icon={faRocket}
primaryColor="#E88945"
secondaryColor="#40C5D3"
className="text-2xl"
/>Button Pattern
// Button with icon
<Button>
<Icon icon={faPlus} className="h-4 w-4" />
{"New"}
</Button>
// Icon-only button (always include sr-only text)
<Button variant="ghost" size="icon">
<Icon icon={faEdit} className="h-4 w-4" />
<span className="sr-only">Edit</span>
</Button>Sizing Reference
| Class | Size | Preview | Usage |
|---|---|---|---|
text-xs | 12px | Inline indicators | |
text-sm | 14px | Small buttons, badges | |
text-base | 16px | Default size | |
text-lg | 18px | Standard buttons | |
text-xl | 20px | Large buttons, navigation | |
text-2xl | 24px | Page headers | |
text-3xl | 30px | Empty states |