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