SerinaNya/KLALB
1
1
Fork 0
forked from KNEMC/KLALB
Code Pull Requests Activity

remove: ui ux pro max skill

Browse Source
This commit is contained in:
SerinaNya
2026-08-23 01:08:48 +08:00
parent 984031c6e2
commit cc811eddfe
172 changed files with 0 additions and 88283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/ui-ux-pro-max/data/icons.csv
-106
View File
@@ -1,106 +0,0 @@
No,Category,Icon Name,Keywords,Library,Import Code,Usage,Best For,Style,Semantic Role,Allowed Contexts
1,Navigation,list,hamburger menu navigation toggle bars,Phosphor,import { List } from '@phosphor-icons/react',"<List size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Mobile navigation drawer toggle sidebar,Outline,interactive,decorative|meaningful|interactive
2,Navigation,arrow-left,back previous return navigate,Phosphor,import { ArrowLeft } from '@phosphor-icons/react',"<ArrowLeft size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Back button breadcrumb navigation,Outline,interactive,decorative|meaningful|interactive
3,Navigation,arrow-right,next forward continue navigate,Phosphor,import { ArrowRight } from '@phosphor-icons/react',"<ArrowRight size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Forward button next step CTA,Outline,interactive,decorative|meaningful|interactive
4,Navigation,caret-down,dropdown expand accordion select,Phosphor,import { CaretDown } from '@phosphor-icons/react',"<CaretDown size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Dropdown toggle accordion header,Outline,interactive,decorative|meaningful|interactive
5,Navigation,caret-up,collapse close accordion minimize,Phosphor,import { CaretUp } from '@phosphor-icons/react',"<CaretUp size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Accordion collapse minimize,Outline,interactive,decorative|meaningful|interactive
6,Navigation,house,homepage main dashboard start,Phosphor,import { House } from '@phosphor-icons/react',"<House size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Home navigation main page,Outline,meaningful,decorative|meaningful|interactive
7,Navigation,x,close cancel dismiss remove exit,Phosphor,import { X } from '@phosphor-icons/react',"<X size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Modal close dismiss button,Outline,interactive,decorative|meaningful|interactive
8,Navigation,arrow-square-out,open new tab external link,Phosphor,import { ArrowSquareOut } from '@phosphor-icons/react',"<ArrowSquareOut size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",External link indicator,Outline,interactive,decorative|meaningful|interactive
9,Action,plus,add create new insert,Phosphor,import { Plus } from '@phosphor-icons/react',"<Plus size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Add button create new item,Outline,interactive,decorative|meaningful|interactive
10,Action,minus,remove subtract decrease delete,Phosphor,import { Minus } from '@phosphor-icons/react',"<Minus size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Remove item quantity decrease,Outline,interactive,decorative|meaningful|interactive
11,Action,trash,delete remove discard bin,Phosphor,import { Trash } from '@phosphor-icons/react',"<Trash size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Delete action destructive,Outline,interactive,decorative|meaningful|interactive
12,Action,pencil-simple,pencil modify change update,Phosphor,import { PencilSimple } from '@phosphor-icons/react',"<PencilSimple size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Edit button modify content,Outline,interactive,decorative|meaningful|interactive
13,Action,floppy-disk,disk store persist save,Phosphor,import { FloppyDisk } from '@phosphor-icons/react',"<FloppyDisk size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Save button persist changes,Outline,interactive,decorative|meaningful|interactive
14,Action,download-simple,export save file download,Phosphor,import { DownloadSimple } from '@phosphor-icons/react',"<DownloadSimple size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Download file export,Outline,meaningful,decorative|meaningful|interactive
15,Action,upload-simple,import file attach upload,Phosphor,import { UploadSimple } from '@phosphor-icons/react',"<UploadSimple size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Upload file import,Outline,meaningful,decorative|meaningful|interactive
16,Action,copy,duplicate clipboard paste,Phosphor,import { Copy } from '@phosphor-icons/react',"<Copy size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Copy to clipboard,Outline,meaningful,decorative|meaningful|interactive
17,Action,share,social distribute send,Phosphor,import { Share } from '@phosphor-icons/react',"<Share size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Share button social,Outline,interactive,decorative|meaningful|interactive
18,Action,magnifying-glass,find lookup filter query,Phosphor,import { MagnifyingGlass } from '@phosphor-icons/react',"<MagnifyingGlass size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Search input bar,Outline,interactive,decorative|meaningful|interactive
19,Action,funnel,sort refine narrow options,Phosphor,import { Funnel } from '@phosphor-icons/react',"<Funnel size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Filter dropdown sort,Outline,interactive,decorative|meaningful|interactive
20,Action,gear,gear cog preferences config,Phosphor,import { Gear } from '@phosphor-icons/react',"<Gear size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Settings page configuration,Outline,meaningful,decorative|meaningful|interactive
21,Status,check,success done complete verified,Phosphor,import { Check } from '@phosphor-icons/react',"<Check size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Success state checkmark,Outline,meaningful,decorative|meaningful|interactive
22,Status,check-circle,success verified approved complete,Phosphor,import { CheckCircle } from '@phosphor-icons/react',"<CheckCircle size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Success badge verified,Outline,meaningful,decorative|meaningful|interactive
23,Status,x-circle,error failed cancel rejected,Phosphor,import { XCircle } from '@phosphor-icons/react',"<XCircle size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Error state failed,Outline,meaningful,decorative|meaningful|interactive
24,Status,warning,warning caution attention danger,Phosphor,import { Warning } from '@phosphor-icons/react',"<Warning size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Warning message caution,Outline,meaningful,decorative|meaningful|interactive
25,Status,warning-circle,info notice information help,Phosphor,import { WarningCircle } from '@phosphor-icons/react',"<WarningCircle size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Info notice alert,Outline,meaningful,decorative|meaningful|interactive
26,Status,info,information help tooltip details,Phosphor,import { Info } from '@phosphor-icons/react',"<Info size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Information tooltip help,Outline,meaningful,decorative|meaningful|interactive
27,Status,circle-notch,loading spinner processing wait,Phosphor,import { CircleNotch } from '@phosphor-icons/react',"<CircleNotch size={20} weight=""regular"" className=""animate-spin"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Loading state spinner,Outline,meaningful,decorative|meaningful|interactive
28,Status,clock,time schedule pending wait,Phosphor,import { Clock } from '@phosphor-icons/react',"<Clock size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Pending time schedule,Outline,meaningful,decorative|meaningful|interactive
29,Communication,envelope,email message inbox letter,Phosphor,import { Envelope } from '@phosphor-icons/react',"<Envelope size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Email contact inbox,Outline,meaningful,decorative|meaningful|interactive
30,Communication,chat-circle,chat comment bubble conversation,Phosphor,import { ChatCircle } from '@phosphor-icons/react',"<ChatCircle size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Chat comment message,Outline,meaningful,decorative|meaningful|interactive
31,Communication,phone,call mobile telephone contact,Phosphor,import { Phone } from '@phosphor-icons/react',"<Phone size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Phone contact call,Outline,meaningful,decorative|meaningful|interactive
32,Communication,paper-plane-tilt,submit dispatch message airplane,Phosphor,import { PaperPlaneTilt } from '@phosphor-icons/react',"<PaperPlaneTilt size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Send message submit,Outline,meaningful,decorative|meaningful|interactive
33,Communication,bell,notification alert ring reminder,Phosphor,import { Bell } from '@phosphor-icons/react',"<Bell size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Notification bell alert,Outline,meaningful,decorative|meaningful|interactive
34,User,user,profile account person avatar,Phosphor,import { User } from '@phosphor-icons/react',"<User size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",User profile account,Outline,meaningful,decorative|meaningful|interactive
35,User,users,team group people members,Phosphor,import { Users } from '@phosphor-icons/react',"<Users size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Team group members,Outline,meaningful,decorative|meaningful|interactive
36,User,user-plus,add invite new member,Phosphor,import { UserPlus } from '@phosphor-icons/react',"<UserPlus size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Add user invite,Outline,interactive,decorative|meaningful|interactive
37,User,sign-in,signin authenticate enter,Phosphor,import { SignIn } from '@phosphor-icons/react',"<SignIn size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Login signin,Outline,meaningful,decorative|meaningful|interactive
38,User,sign-out,signout exit leave logout,Phosphor,import { SignOut } from '@phosphor-icons/react',"<SignOut size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Logout signout,Outline,meaningful,decorative|meaningful|interactive
39,Media,image,photo picture gallery thumbnail,Phosphor,import { Image } from '@phosphor-icons/react',"<Image size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Image photo gallery,Outline,meaningful,decorative|meaningful|interactive
40,Media,video,movie film play record,Phosphor,import { Video } from '@phosphor-icons/react',"<Video size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Video player media,Outline,interactive,decorative|meaningful|interactive
41,Media,play,start video audio media,Phosphor,import { Play } from '@phosphor-icons/react',"<Play size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Play button video audio,Outline,interactive,decorative|meaningful|interactive
42,Media,pause,stop halt video audio,Phosphor,import { Pause } from '@phosphor-icons/react',"<Pause size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Pause button media,Outline,interactive,decorative|meaningful|interactive
43,Media,speaker-high,sound audio speaker music,Phosphor,import { SpeakerHigh } from '@phosphor-icons/react',"<SpeakerHigh size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Volume audio sound,Outline,meaningful,decorative|meaningful|interactive
44,Media,microphone,microphone record voice audio,Phosphor,import { Microphone } from '@phosphor-icons/react',"<Microphone size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Microphone voice record,Outline,meaningful,decorative|meaningful|interactive
45,Media,camera,photo capture snapshot picture,Phosphor,import { Camera } from '@phosphor-icons/react',"<Camera size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Camera photo capture,Outline,meaningful,decorative|meaningful|interactive
46,Commerce,shopping-cart,cart checkout basket buy,Phosphor,import { ShoppingCart } from '@phosphor-icons/react',"<ShoppingCart size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Shopping cart e-commerce,Outline,meaningful,decorative|meaningful|interactive
47,Commerce,shopping-bag,purchase buy store bag,Phosphor,import { ShoppingBag } from '@phosphor-icons/react',"<ShoppingBag size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Shopping bag purchase,Outline,meaningful,decorative|meaningful|interactive
48,Commerce,credit-card,payment card checkout stripe,Phosphor,import { CreditCard } from '@phosphor-icons/react',"<CreditCard size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Payment credit card,Outline,interactive,decorative|meaningful|interactive
49,Commerce,currency-dollar,money price currency cost,Phosphor,import { CurrencyDollar } from '@phosphor-icons/react',"<CurrencyDollar size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Price money currency,Outline,meaningful,decorative|meaningful|interactive
50,Commerce,tag,label price discount sale,Phosphor,import { Tag } from '@phosphor-icons/react',"<Tag size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Price tag label,Outline,meaningful,decorative|meaningful|interactive
51,Commerce,gift,present reward bonus offer,Phosphor,import { Gift } from '@phosphor-icons/react',"<Gift size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Gift reward offer,Outline,meaningful,decorative|meaningful|interactive
52,Commerce,percent,discount sale offer promo,Phosphor,import { Percent } from '@phosphor-icons/react',"<Percent size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Discount percentage sale,Outline,meaningful,decorative|meaningful|interactive
53,Data,chart-bar,analytics statistics graph metrics,Phosphor,import { ChartBar } from '@phosphor-icons/react',"<ChartBar size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Bar chart analytics,Outline,meaningful,decorative|meaningful|interactive
54,Data,chart-pie,statistics distribution breakdown,Phosphor,import { ChartPie } from '@phosphor-icons/react',"<ChartPie size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Pie chart distribution,Outline,meaningful,decorative|meaningful|interactive
55,Data,trend-up,growth increase positive trend,Phosphor,import { TrendUp } from '@phosphor-icons/react',"<TrendUp size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Growth trend positive,Outline,meaningful,decorative|meaningful|interactive
56,Data,trend-down,decline decrease negative trend,Phosphor,import { TrendDown } from '@phosphor-icons/react',"<TrendDown size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Decline trend negative,Outline,meaningful,decorative|meaningful|interactive
57,Data,pulse,activity heartbeat monitor live,Phosphor,import { Pulse } from '@phosphor-icons/react',"<Pulse size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Activity monitor pulse,Outline,meaningful,decorative|meaningful|interactive
58,Data,database,storage server data backend,Phosphor,import { Database } from '@phosphor-icons/react',"<Database size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Database storage,Outline,meaningful,decorative|meaningful|interactive
59,Files,file,document page paper doc,Phosphor,import { File } from '@phosphor-icons/react',"<File size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",File document,Outline,meaningful,decorative|meaningful|interactive
60,Files,file-text,document text page article,Phosphor,import { FileText } from '@phosphor-icons/react',"<FileText size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Text document article,Outline,meaningful,decorative|meaningful|interactive
61,Files,folder,directory organize group files,Phosphor,import { Folder } from '@phosphor-icons/react',"<Folder size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Folder directory,Outline,meaningful,decorative|meaningful|interactive
62,Files,folder-open,expanded browse files view,Phosphor,import { FolderOpen } from '@phosphor-icons/react',"<FolderOpen size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Open folder browse,Outline,meaningful,decorative|meaningful|interactive
63,Files,paperclip,attachment attach file link,Phosphor,import { Paperclip } from '@phosphor-icons/react',"<Paperclip size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Attachment paperclip,Outline,meaningful,decorative|meaningful|interactive
64,Files,link,url hyperlink chain connect,Phosphor,import { Link } from '@phosphor-icons/react',"<Link size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Link URL hyperlink,Outline,meaningful,decorative|meaningful|interactive
65,Files,clipboard,paste copy buffer notes,Phosphor,import { Clipboard } from '@phosphor-icons/react',"<Clipboard size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Clipboard paste,Outline,meaningful,decorative|meaningful|interactive
66,Layout,grid-four,tiles gallery layout dashboard,Phosphor,import { GridFour } from '@phosphor-icons/react',"<GridFour size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Grid layout gallery,Outline,meaningful,decorative|meaningful|interactive
67,Layout,list-bullets,rows table lines items,Phosphor,import { ListBullets } from '@phosphor-icons/react',"<ListBullets size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",List view rows,Outline,meaningful,decorative|meaningful|interactive
68,Layout,columns,layout split dual sidebar,Phosphor,import { Columns } from '@phosphor-icons/react',"<Columns size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Column layout split,Outline,meaningful,decorative|meaningful|interactive
69,Layout,arrows-out,fullscreen expand enlarge zoom,Phosphor,import { ArrowsOut } from '@phosphor-icons/react',"<ArrowsOut size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Fullscreen maximize,Outline,meaningful,decorative|meaningful|interactive
70,Layout,arrows-in,reduce shrink collapse exit,Phosphor,import { ArrowsIn } from '@phosphor-icons/react',"<ArrowsIn size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Minimize reduce,Outline,meaningful,decorative|meaningful|interactive
71,Layout,sidebar,panel drawer navigation menu,Phosphor,import { Sidebar } from '@phosphor-icons/react',"<Sidebar size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Sidebar panel,Outline,meaningful,decorative|meaningful|interactive
72,Social,heart,like love favorite wishlist,Phosphor,import { Heart } from '@phosphor-icons/react',"<Heart size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Like favorite love,Outline,meaningful,decorative|meaningful|interactive
73,Social,star,rating review favorite bookmark,Phosphor,import { Star } from '@phosphor-icons/react',"<Star size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Star rating favorite,Outline,meaningful,decorative|meaningful|interactive
74,Social,thumbs-up,like approve agree positive,Phosphor,import { ThumbsUp } from '@phosphor-icons/react',"<ThumbsUp size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Like approve thumb,Outline,meaningful,decorative|meaningful|interactive
75,Social,thumbs-down,dislike disapprove disagree negative,Phosphor,import { ThumbsDown } from '@phosphor-icons/react',"<ThumbsDown size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Dislike disapprove,Outline,meaningful,decorative|meaningful|interactive
76,Social,bookmark,save later favorite mark,Phosphor,import { Bookmark } from '@phosphor-icons/react',"<Bookmark size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Bookmark save,Outline,meaningful,decorative|meaningful|interactive
77,Social,flag,report mark important highlight,Phosphor,import { Flag } from '@phosphor-icons/react',"<Flag size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Flag report,Outline,meaningful,decorative|meaningful|interactive
78,Device,device-mobile,mobile phone device touch,Phosphor,import { DeviceMobile } from '@phosphor-icons/react',"<DeviceMobile size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Mobile smartphone,Outline,meaningful,decorative|meaningful|interactive
79,Device,device-tablet,ipad device touch screen,Phosphor,import { DeviceTablet } from '@phosphor-icons/react',"<DeviceTablet size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Tablet device,Outline,meaningful,decorative|meaningful|interactive
80,Device,monitor,desktop screen computer display,Phosphor,import { Monitor } from '@phosphor-icons/react',"<Monitor size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Desktop monitor,Outline,meaningful,decorative|meaningful|interactive
81,Device,laptop,notebook computer portable device,Phosphor,import { Laptop } from '@phosphor-icons/react',"<Laptop size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Laptop computer,Outline,meaningful,decorative|meaningful|interactive
82,Device,printer,print document output paper,Phosphor,import { Printer } from '@phosphor-icons/react',"<Printer size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Printer print,Outline,meaningful,decorative|meaningful|interactive
83,Security,lock,secure password protected private,Phosphor,import { Lock } from '@phosphor-icons/react',"<Lock size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Lock secure,Outline,meaningful,decorative|meaningful|interactive
84,Security,lock-open,open access unsecure public,Phosphor,import { LockOpen } from '@phosphor-icons/react',"<LockOpen size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Unlock open,Outline,meaningful,decorative|meaningful|interactive
85,Security,shield,protection security safe guard,Phosphor,import { Shield } from '@phosphor-icons/react',"<Shield size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Shield protection,Outline,meaningful,decorative|meaningful|interactive
86,Security,key,password access unlock login,Phosphor,import { Key } from '@phosphor-icons/react',"<Key size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Key password,Outline,meaningful,decorative|meaningful|interactive
87,Security,eye,view show visible password,Phosphor,import { Eye } from '@phosphor-icons/react',"<Eye size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Show password view,Outline,meaningful,decorative|meaningful|interactive
88,Security,eye-slash,hide invisible password hidden,Phosphor,import { EyeSlash } from '@phosphor-icons/react',"<EyeSlash size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Hide password,Outline,meaningful,decorative|meaningful|interactive
89,Location,map-pin,location marker place address,Phosphor,import { MapPin } from '@phosphor-icons/react',"<MapPin size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Location pin marker,Outline,meaningful,decorative|meaningful|interactive
90,Location,map-trifold,map directions navigate geography location,Phosphor,import { MapTrifold } from '@phosphor-icons/react',"<MapTrifold size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Map directions,Outline,meaningful,decorative|meaningful|interactive
91,Location,compass,compass direction pointer arrow,Phosphor,import { Compass } from '@phosphor-icons/react',"<Compass size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Navigation compass,Outline,meaningful,decorative|meaningful|interactive
92,Location,globe,world international global web,Phosphor,import { Globe } from '@phosphor-icons/react',"<Globe size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Globe world,Outline,meaningful,decorative|meaningful|interactive
93,Time,calendar,date schedule event appointment,Phosphor,import { Calendar } from '@phosphor-icons/react',"<Calendar size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Calendar date,Outline,meaningful,decorative|meaningful|interactive
94,Time,arrows-clockwise,reload sync update refresh,Phosphor,import { ArrowsClockwise } from '@phosphor-icons/react',"<ArrowsClockwise size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Refresh reload,Outline,meaningful,decorative|meaningful|interactive
95,Time,arrow-counter-clockwise,undo back revert history,Phosphor,import { ArrowCounterClockwise } from '@phosphor-icons/react',"<ArrowCounterClockwise size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Undo revert,Outline,meaningful,decorative|meaningful|interactive
96,Time,arrow-clockwise,redo forward repeat history,Phosphor,import { ArrowClockwise } from '@phosphor-icons/react',"<ArrowClockwise size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Redo forward,Outline,meaningful,decorative|meaningful|interactive
97,Development,code,develop programming syntax html,Phosphor,import { Code } from '@phosphor-icons/react',"<Code size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Code development,Outline,meaningful,decorative|meaningful|interactive
98,Development,terminal,console cli command shell,Phosphor,import { Terminal } from '@phosphor-icons/react',"<Terminal size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Terminal console,Outline,meaningful,decorative|meaningful|interactive
99,Development,git-branch,version control branch merge,Phosphor,import { GitBranch } from '@phosphor-icons/react',"<GitBranch size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Git branch,Outline,meaningful,decorative|meaningful|interactive
100,Development,github-logo,repository code open source,Phosphor,import { GithubLogo } from '@phosphor-icons/react',"<GithubLogo size={20} weight=""regular"" />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",GitHub repository,Outline,meaningful,decorative|meaningful|interactive
101,Style Config,bold-typography-icon-system,"bold typography, editorial, mono label, phosphor, weight regular, minimal, icon+label required, size 20–32",Phosphor (react-native),import { ArrowRight } from 'phosphor-react-native',"<ArrowRight size={20} weight=""regular"" color={colors.accent} />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).","Bold Typography Mobile style: weight=""regular"". Size 20px for UI controls, 32px for feature anchors. Icons MUST be paired with a Mono-stack text label (JetBrains Mono). Standalone icons only allowed for standard navigation (e.g., Back arrow). Accent color #FF3D00 only.",Outline,meaningful,decorative|meaningful|interactive
102,Style Config,cyberpunk-icon-system,"cyberpunk, neon, glow, hud, phosphor, weight regular, accent glow, dark, angular, react native",Phosphor (react-native),import { Lightning } from 'phosphor-react-native',"<Lightning size={24} weight=""regular"" color={colors.accent} />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).","Cyberpunk Mobile HUD style: weight=""regular"", color={colors.accent} (#00FF88 Matrix Green). Wrap every icon in a View with shadowColor: colors.accent / shadowOpacity: 0.6 / shadowRadius: 8 to simulate neon glow. Use borderRadius: 0 on wrapper. Avoid rounded icon containers. Always pair icon with data label in JetBrains Mono.",Outline,meaningful,decorative|meaningful|interactive
103,Style Config,academia-icon-system,"academia, library, brass, ornate, phosphor, weight thin, muted warm, scholarly, mobile",Phosphor (react-native),import { BookOpen } from 'phosphor-react-native',"<BookOpen size={22} weight=""thin"" color={colors.brass} />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).","Academia (Scholarly Mobile) style: weight=""thin"" (thin engraved feel), color={colors.brass} (#C9A962). No sharp geometric or tech-inspired icons. Prefer book, scroll, key, quill-type icon metaphors. Wrap in circular View with 1px brass border. Avoid neon or saturated colored icons. All icon-only navigation must have an accessibilityLabel.",Outline,meaningful,decorative|meaningful|interactive
104,Style Config,web3-bitcoin-icon-system,"web3, bitcoin, defi, crypto, neon orange, holographic, blurview, phosphor, glow, fintech mobile",Phosphor (react-native),import { TrendUp } from 'phosphor-react-native',"<TrendUp size={24} weight=""regular"" color={colors.bitcoinOrange} />; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).","Bitcoin DeFi Mobile style: weight=""regular"", color={colors.bitcoinOrange} (#F7931A). Wrap icons in circular BlurView (intensity: 20) with 1px borderColor: '#F7931A' border (Holographic Node effect). shadowColor: '#F7931A' / shadowOpacity: 0.4 / shadowRadius: 8. Prefer finance/data icons (TrendUp, Wallet, Shield, Layers). All data icons use JetBrains Mono label.",Outline,meaningful,decorative|meaningful|interactive
105,Guideline,icon-context-accessibility,"decorative icon aria hidden, meaningful icon text alternative, icon button accessible label, accessible name, aria pressed, aria expanded, semantic context, phosphor, heroicons",Phosphor (primary) + Heroicons (fallback),import { Question } from '@phosphor-icons/react'; import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';,"Prefer the most semantically precise Phosphor icon, even if it is outside this curated subset. Use Heroicons only as a consistent fallback. Keep one visual family per surface. Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).","Contextual icon semantics, icon accessibility, and library fallback rules",Outline,guideline,decorative|meaningful|interactive
1 No Category Icon Name Keywords Library Import Code Usage Best For Style Semantic Role Allowed Contexts
2 1 Navigation list hamburger menu navigation toggle bars Phosphor import { List } from '@phosphor-icons/react' <List size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Mobile navigation drawer toggle sidebar Outline interactive decorative|meaningful|interactive
3 2 Navigation arrow-left back previous return navigate Phosphor import { ArrowLeft } from '@phosphor-icons/react' <ArrowLeft size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Back button breadcrumb navigation Outline interactive decorative|meaningful|interactive
4 3 Navigation arrow-right next forward continue navigate Phosphor import { ArrowRight } from '@phosphor-icons/react' <ArrowRight size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Forward button next step CTA Outline interactive decorative|meaningful|interactive
5 4 Navigation caret-down dropdown expand accordion select Phosphor import { CaretDown } from '@phosphor-icons/react' <CaretDown size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Dropdown toggle accordion header Outline interactive decorative|meaningful|interactive
6 5 Navigation caret-up collapse close accordion minimize Phosphor import { CaretUp } from '@phosphor-icons/react' <CaretUp size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Accordion collapse minimize Outline interactive decorative|meaningful|interactive
7 6 Navigation house homepage main dashboard start Phosphor import { House } from '@phosphor-icons/react' <House size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Home navigation main page Outline meaningful decorative|meaningful|interactive
8 7 Navigation x close cancel dismiss remove exit Phosphor import { X } from '@phosphor-icons/react' <X size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Modal close dismiss button Outline interactive decorative|meaningful|interactive
9 8 Navigation arrow-square-out open new tab external link Phosphor import { ArrowSquareOut } from '@phosphor-icons/react' <ArrowSquareOut size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). External link indicator Outline interactive decorative|meaningful|interactive
10 9 Action plus add create new insert Phosphor import { Plus } from '@phosphor-icons/react' <Plus size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Add button create new item Outline interactive decorative|meaningful|interactive
11 10 Action minus remove subtract decrease delete Phosphor import { Minus } from '@phosphor-icons/react' <Minus size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Remove item quantity decrease Outline interactive decorative|meaningful|interactive
12 11 Action trash delete remove discard bin Phosphor import { Trash } from '@phosphor-icons/react' <Trash size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Delete action destructive Outline interactive decorative|meaningful|interactive
13 12 Action pencil-simple pencil modify change update Phosphor import { PencilSimple } from '@phosphor-icons/react' <PencilSimple size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Edit button modify content Outline interactive decorative|meaningful|interactive
14 13 Action floppy-disk disk store persist save Phosphor import { FloppyDisk } from '@phosphor-icons/react' <FloppyDisk size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Save button persist changes Outline interactive decorative|meaningful|interactive
15 14 Action download-simple export save file download Phosphor import { DownloadSimple } from '@phosphor-icons/react' <DownloadSimple size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Download file export Outline meaningful decorative|meaningful|interactive
16 15 Action upload-simple import file attach upload Phosphor import { UploadSimple } from '@phosphor-icons/react' <UploadSimple size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Upload file import Outline meaningful decorative|meaningful|interactive
17 16 Action copy duplicate clipboard paste Phosphor import { Copy } from '@phosphor-icons/react' <Copy size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Copy to clipboard Outline meaningful decorative|meaningful|interactive
18 17 Action share social distribute send Phosphor import { Share } from '@phosphor-icons/react' <Share size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Share button social Outline interactive decorative|meaningful|interactive
19 18 Action magnifying-glass find lookup filter query Phosphor import { MagnifyingGlass } from '@phosphor-icons/react' <MagnifyingGlass size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Search input bar Outline interactive decorative|meaningful|interactive
20 19 Action funnel sort refine narrow options Phosphor import { Funnel } from '@phosphor-icons/react' <Funnel size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Filter dropdown sort Outline interactive decorative|meaningful|interactive
21 20 Action gear gear cog preferences config Phosphor import { Gear } from '@phosphor-icons/react' <Gear size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Settings page configuration Outline meaningful decorative|meaningful|interactive
22 21 Status check success done complete verified Phosphor import { Check } from '@phosphor-icons/react' <Check size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Success state checkmark Outline meaningful decorative|meaningful|interactive
23 22 Status check-circle success verified approved complete Phosphor import { CheckCircle } from '@phosphor-icons/react' <CheckCircle size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Success badge verified Outline meaningful decorative|meaningful|interactive
24 23 Status x-circle error failed cancel rejected Phosphor import { XCircle } from '@phosphor-icons/react' <XCircle size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Error state failed Outline meaningful decorative|meaningful|interactive
25 24 Status warning warning caution attention danger Phosphor import { Warning } from '@phosphor-icons/react' <Warning size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Warning message caution Outline meaningful decorative|meaningful|interactive
26 25 Status warning-circle info notice information help Phosphor import { WarningCircle } from '@phosphor-icons/react' <WarningCircle size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Info notice alert Outline meaningful decorative|meaningful|interactive
27 26 Status info information help tooltip details Phosphor import { Info } from '@phosphor-icons/react' <Info size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Information tooltip help Outline meaningful decorative|meaningful|interactive
28 27 Status circle-notch loading spinner processing wait Phosphor import { CircleNotch } from '@phosphor-icons/react' <CircleNotch size={20} weight="regular" className="animate-spin" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Loading state spinner Outline meaningful decorative|meaningful|interactive
29 28 Status clock time schedule pending wait Phosphor import { Clock } from '@phosphor-icons/react' <Clock size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Pending time schedule Outline meaningful decorative|meaningful|interactive
30 29 Communication envelope email message inbox letter Phosphor import { Envelope } from '@phosphor-icons/react' <Envelope size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Email contact inbox Outline meaningful decorative|meaningful|interactive
31 30 Communication chat-circle chat comment bubble conversation Phosphor import { ChatCircle } from '@phosphor-icons/react' <ChatCircle size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Chat comment message Outline meaningful decorative|meaningful|interactive
32 31 Communication phone call mobile telephone contact Phosphor import { Phone } from '@phosphor-icons/react' <Phone size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Phone contact call Outline meaningful decorative|meaningful|interactive
33 32 Communication paper-plane-tilt submit dispatch message airplane Phosphor import { PaperPlaneTilt } from '@phosphor-icons/react' <PaperPlaneTilt size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Send message submit Outline meaningful decorative|meaningful|interactive
34 33 Communication bell notification alert ring reminder Phosphor import { Bell } from '@phosphor-icons/react' <Bell size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Notification bell alert Outline meaningful decorative|meaningful|interactive
35 34 User user profile account person avatar Phosphor import { User } from '@phosphor-icons/react' <User size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). User profile account Outline meaningful decorative|meaningful|interactive
36 35 User users team group people members Phosphor import { Users } from '@phosphor-icons/react' <Users size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Team group members Outline meaningful decorative|meaningful|interactive
37 36 User user-plus add invite new member Phosphor import { UserPlus } from '@phosphor-icons/react' <UserPlus size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Add user invite Outline interactive decorative|meaningful|interactive
38 37 User sign-in signin authenticate enter Phosphor import { SignIn } from '@phosphor-icons/react' <SignIn size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Login signin Outline meaningful decorative|meaningful|interactive
39 38 User sign-out signout exit leave logout Phosphor import { SignOut } from '@phosphor-icons/react' <SignOut size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Logout signout Outline meaningful decorative|meaningful|interactive
40 39 Media image photo picture gallery thumbnail Phosphor import { Image } from '@phosphor-icons/react' <Image size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Image photo gallery Outline meaningful decorative|meaningful|interactive
41 40 Media video movie film play record Phosphor import { Video } from '@phosphor-icons/react' <Video size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Video player media Outline interactive decorative|meaningful|interactive
42 41 Media play start video audio media Phosphor import { Play } from '@phosphor-icons/react' <Play size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Play button video audio Outline interactive decorative|meaningful|interactive
43 42 Media pause stop halt video audio Phosphor import { Pause } from '@phosphor-icons/react' <Pause size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Pause button media Outline interactive decorative|meaningful|interactive
44 43 Media speaker-high sound audio speaker music Phosphor import { SpeakerHigh } from '@phosphor-icons/react' <SpeakerHigh size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Volume audio sound Outline meaningful decorative|meaningful|interactive
45 44 Media microphone microphone record voice audio Phosphor import { Microphone } from '@phosphor-icons/react' <Microphone size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Microphone voice record Outline meaningful decorative|meaningful|interactive
46 45 Media camera photo capture snapshot picture Phosphor import { Camera } from '@phosphor-icons/react' <Camera size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Camera photo capture Outline meaningful decorative|meaningful|interactive
47 46 Commerce shopping-cart cart checkout basket buy Phosphor import { ShoppingCart } from '@phosphor-icons/react' <ShoppingCart size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Shopping cart e-commerce Outline meaningful decorative|meaningful|interactive
48 47 Commerce shopping-bag purchase buy store bag Phosphor import { ShoppingBag } from '@phosphor-icons/react' <ShoppingBag size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Shopping bag purchase Outline meaningful decorative|meaningful|interactive
49 48 Commerce credit-card payment card checkout stripe Phosphor import { CreditCard } from '@phosphor-icons/react' <CreditCard size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Payment credit card Outline interactive decorative|meaningful|interactive
50 49 Commerce currency-dollar money price currency cost Phosphor import { CurrencyDollar } from '@phosphor-icons/react' <CurrencyDollar size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Price money currency Outline meaningful decorative|meaningful|interactive
51 50 Commerce tag label price discount sale Phosphor import { Tag } from '@phosphor-icons/react' <Tag size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Price tag label Outline meaningful decorative|meaningful|interactive
52 51 Commerce gift present reward bonus offer Phosphor import { Gift } from '@phosphor-icons/react' <Gift size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Gift reward offer Outline meaningful decorative|meaningful|interactive
53 52 Commerce percent discount sale offer promo Phosphor import { Percent } from '@phosphor-icons/react' <Percent size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Discount percentage sale Outline meaningful decorative|meaningful|interactive
54 53 Data chart-bar analytics statistics graph metrics Phosphor import { ChartBar } from '@phosphor-icons/react' <ChartBar size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Bar chart analytics Outline meaningful decorative|meaningful|interactive
55 54 Data chart-pie statistics distribution breakdown Phosphor import { ChartPie } from '@phosphor-icons/react' <ChartPie size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Pie chart distribution Outline meaningful decorative|meaningful|interactive
56 55 Data trend-up growth increase positive trend Phosphor import { TrendUp } from '@phosphor-icons/react' <TrendUp size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Growth trend positive Outline meaningful decorative|meaningful|interactive
57 56 Data trend-down decline decrease negative trend Phosphor import { TrendDown } from '@phosphor-icons/react' <TrendDown size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Decline trend negative Outline meaningful decorative|meaningful|interactive
58 57 Data pulse activity heartbeat monitor live Phosphor import { Pulse } from '@phosphor-icons/react' <Pulse size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Activity monitor pulse Outline meaningful decorative|meaningful|interactive
59 58 Data database storage server data backend Phosphor import { Database } from '@phosphor-icons/react' <Database size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Database storage Outline meaningful decorative|meaningful|interactive
60 59 Files file document page paper doc Phosphor import { File } from '@phosphor-icons/react' <File size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). File document Outline meaningful decorative|meaningful|interactive
61 60 Files file-text document text page article Phosphor import { FileText } from '@phosphor-icons/react' <FileText size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Text document article Outline meaningful decorative|meaningful|interactive
62 61 Files folder directory organize group files Phosphor import { Folder } from '@phosphor-icons/react' <Folder size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Folder directory Outline meaningful decorative|meaningful|interactive
63 62 Files folder-open expanded browse files view Phosphor import { FolderOpen } from '@phosphor-icons/react' <FolderOpen size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Open folder browse Outline meaningful decorative|meaningful|interactive
64 63 Files paperclip attachment attach file link Phosphor import { Paperclip } from '@phosphor-icons/react' <Paperclip size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Attachment paperclip Outline meaningful decorative|meaningful|interactive
65 64 Files link url hyperlink chain connect Phosphor import { Link } from '@phosphor-icons/react' <Link size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Link URL hyperlink Outline meaningful decorative|meaningful|interactive
66 65 Files clipboard paste copy buffer notes Phosphor import { Clipboard } from '@phosphor-icons/react' <Clipboard size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Clipboard paste Outline meaningful decorative|meaningful|interactive
67 66 Layout grid-four tiles gallery layout dashboard Phosphor import { GridFour } from '@phosphor-icons/react' <GridFour size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Grid layout gallery Outline meaningful decorative|meaningful|interactive
68 67 Layout list-bullets rows table lines items Phosphor import { ListBullets } from '@phosphor-icons/react' <ListBullets size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). List view rows Outline meaningful decorative|meaningful|interactive
69 68 Layout columns layout split dual sidebar Phosphor import { Columns } from '@phosphor-icons/react' <Columns size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Column layout split Outline meaningful decorative|meaningful|interactive
70 69 Layout arrows-out fullscreen expand enlarge zoom Phosphor import { ArrowsOut } from '@phosphor-icons/react' <ArrowsOut size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Fullscreen maximize Outline meaningful decorative|meaningful|interactive
71 70 Layout arrows-in reduce shrink collapse exit Phosphor import { ArrowsIn } from '@phosphor-icons/react' <ArrowsIn size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Minimize reduce Outline meaningful decorative|meaningful|interactive
72 71 Layout sidebar panel drawer navigation menu Phosphor import { Sidebar } from '@phosphor-icons/react' <Sidebar size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Sidebar panel Outline meaningful decorative|meaningful|interactive
73 72 Social heart like love favorite wishlist Phosphor import { Heart } from '@phosphor-icons/react' <Heart size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Like favorite love Outline meaningful decorative|meaningful|interactive
74 73 Social star rating review favorite bookmark Phosphor import { Star } from '@phosphor-icons/react' <Star size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Star rating favorite Outline meaningful decorative|meaningful|interactive
75 74 Social thumbs-up like approve agree positive Phosphor import { ThumbsUp } from '@phosphor-icons/react' <ThumbsUp size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Like approve thumb Outline meaningful decorative|meaningful|interactive
76 75 Social thumbs-down dislike disapprove disagree negative Phosphor import { ThumbsDown } from '@phosphor-icons/react' <ThumbsDown size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Dislike disapprove Outline meaningful decorative|meaningful|interactive
77 76 Social bookmark save later favorite mark Phosphor import { Bookmark } from '@phosphor-icons/react' <Bookmark size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Bookmark save Outline meaningful decorative|meaningful|interactive
78 77 Social flag report mark important highlight Phosphor import { Flag } from '@phosphor-icons/react' <Flag size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Flag report Outline meaningful decorative|meaningful|interactive
79 78 Device device-mobile mobile phone device touch Phosphor import { DeviceMobile } from '@phosphor-icons/react' <DeviceMobile size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Mobile smartphone Outline meaningful decorative|meaningful|interactive
80 79 Device device-tablet ipad device touch screen Phosphor import { DeviceTablet } from '@phosphor-icons/react' <DeviceTablet size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Tablet device Outline meaningful decorative|meaningful|interactive
81 80 Device monitor desktop screen computer display Phosphor import { Monitor } from '@phosphor-icons/react' <Monitor size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Desktop monitor Outline meaningful decorative|meaningful|interactive
82 81 Device laptop notebook computer portable device Phosphor import { Laptop } from '@phosphor-icons/react' <Laptop size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Laptop computer Outline meaningful decorative|meaningful|interactive
83 82 Device printer print document output paper Phosphor import { Printer } from '@phosphor-icons/react' <Printer size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Printer print Outline meaningful decorative|meaningful|interactive
84 83 Security lock secure password protected private Phosphor import { Lock } from '@phosphor-icons/react' <Lock size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Lock secure Outline meaningful decorative|meaningful|interactive
85 84 Security lock-open open access unsecure public Phosphor import { LockOpen } from '@phosphor-icons/react' <LockOpen size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Unlock open Outline meaningful decorative|meaningful|interactive
86 85 Security shield protection security safe guard Phosphor import { Shield } from '@phosphor-icons/react' <Shield size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Shield protection Outline meaningful decorative|meaningful|interactive
87 86 Security key password access unlock login Phosphor import { Key } from '@phosphor-icons/react' <Key size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Key password Outline meaningful decorative|meaningful|interactive
88 87 Security eye view show visible password Phosphor import { Eye } from '@phosphor-icons/react' <Eye size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Show password view Outline meaningful decorative|meaningful|interactive
89 88 Security eye-slash hide invisible password hidden Phosphor import { EyeSlash } from '@phosphor-icons/react' <EyeSlash size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Hide password Outline meaningful decorative|meaningful|interactive
90 89 Location map-pin location marker place address Phosphor import { MapPin } from '@phosphor-icons/react' <MapPin size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Location pin marker Outline meaningful decorative|meaningful|interactive
91 90 Location map-trifold map directions navigate geography location Phosphor import { MapTrifold } from '@phosphor-icons/react' <MapTrifold size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Map directions Outline meaningful decorative|meaningful|interactive
92 91 Location compass compass direction pointer arrow Phosphor import { Compass } from '@phosphor-icons/react' <Compass size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Navigation compass Outline meaningful decorative|meaningful|interactive
93 92 Location globe world international global web Phosphor import { Globe } from '@phosphor-icons/react' <Globe size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Globe world Outline meaningful decorative|meaningful|interactive
94 93 Time calendar date schedule event appointment Phosphor import { Calendar } from '@phosphor-icons/react' <Calendar size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Calendar date Outline meaningful decorative|meaningful|interactive
95 94 Time arrows-clockwise reload sync update refresh Phosphor import { ArrowsClockwise } from '@phosphor-icons/react' <ArrowsClockwise size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Refresh reload Outline meaningful decorative|meaningful|interactive
96 95 Time arrow-counter-clockwise undo back revert history Phosphor import { ArrowCounterClockwise } from '@phosphor-icons/react' <ArrowCounterClockwise size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Undo revert Outline meaningful decorative|meaningful|interactive
97 96 Time arrow-clockwise redo forward repeat history Phosphor import { ArrowClockwise } from '@phosphor-icons/react' <ArrowClockwise size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Redo forward Outline meaningful decorative|meaningful|interactive
98 97 Development code develop programming syntax html Phosphor import { Code } from '@phosphor-icons/react' <Code size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Code development Outline meaningful decorative|meaningful|interactive
99 98 Development terminal console cli command shell Phosphor import { Terminal } from '@phosphor-icons/react' <Terminal size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Terminal console Outline meaningful decorative|meaningful|interactive
100 99 Development git-branch version control branch merge Phosphor import { GitBranch } from '@phosphor-icons/react' <GitBranch size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Git branch Outline meaningful decorative|meaningful|interactive
101 100 Development github-logo repository code open source Phosphor import { GithubLogo } from '@phosphor-icons/react' <GithubLogo size={20} weight="regular" />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). GitHub repository Outline meaningful decorative|meaningful|interactive
102 101 Style Config bold-typography-icon-system bold typography, editorial, mono label, phosphor, weight regular, minimal, icon+label required, size 20–32 Phosphor (react-native) import { ArrowRight } from 'phosphor-react-native' <ArrowRight size={20} weight="regular" color={colors.accent} />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Bold Typography Mobile style: weight="regular". Size 20px for UI controls, 32px for feature anchors. Icons MUST be paired with a Mono-stack text label (JetBrains Mono). Standalone icons only allowed for standard navigation (e.g., Back arrow). Accent color #FF3D00 only. Outline meaningful decorative|meaningful|interactive
103 102 Style Config cyberpunk-icon-system cyberpunk, neon, glow, hud, phosphor, weight regular, accent glow, dark, angular, react native Phosphor (react-native) import { Lightning } from 'phosphor-react-native' <Lightning size={24} weight="regular" color={colors.accent} />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Cyberpunk Mobile HUD style: weight="regular", color={colors.accent} (#00FF88 Matrix Green). Wrap every icon in a View with shadowColor: colors.accent / shadowOpacity: 0.6 / shadowRadius: 8 to simulate neon glow. Use borderRadius: 0 on wrapper. Avoid rounded icon containers. Always pair icon with data label in JetBrains Mono. Outline meaningful decorative|meaningful|interactive
104 103 Style Config academia-icon-system academia, library, brass, ornate, phosphor, weight thin, muted warm, scholarly, mobile Phosphor (react-native) import { BookOpen } from 'phosphor-react-native' <BookOpen size={22} weight="thin" color={colors.brass} />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Academia (Scholarly Mobile) style: weight="thin" (thin engraved feel), color={colors.brass} (#C9A962). No sharp geometric or tech-inspired icons. Prefer book, scroll, key, quill-type icon metaphors. Wrap in circular View with 1px brass border. Avoid neon or saturated colored icons. All icon-only navigation must have an accessibilityLabel. Outline meaningful decorative|meaningful|interactive
105 104 Style Config web3-bitcoin-icon-system web3, bitcoin, defi, crypto, neon orange, holographic, blurview, phosphor, glow, fintech mobile Phosphor (react-native) import { TrendUp } from 'phosphor-react-native' <TrendUp size={24} weight="regular" color={colors.bitcoinOrange} />; Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Bitcoin DeFi Mobile style: weight="regular", color={colors.bitcoinOrange} (#F7931A). Wrap icons in circular BlurView (intensity: 20) with 1px borderColor: '#F7931A' border (Holographic Node effect). shadowColor: '#F7931A' / shadowOpacity: 0.4 / shadowRadius: 8. Prefer finance/data icons (TrendUp, Wallet, Shield, Layers). All data icons use JetBrains Mono label. Outline meaningful decorative|meaningful|interactive
106 105 Guideline icon-context-accessibility decorative icon aria hidden, meaningful icon text alternative, icon button accessible label, accessible name, aria pressed, aria expanded, semantic context, phosphor, heroicons Phosphor (primary) + Heroicons (fallback) import { Question } from '@phosphor-icons/react'; import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline'; Prefer the most semantically precise Phosphor icon, even if it is outside this curated subset. Use Heroicons only as a consistent fallback. Keep one visual family per surface. Context is chosen by use: if decorative beside visible text, set aria-hidden="true"; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded). Contextual icon semantics, icon accessibility, and library fallback rules Outline guideline decorative|meaningful|interactive