ui-ux-pro-max-skill/cli/assets/data/icons.csv

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