Icons
One icon set for the whole app. Everyday icons come from Phosphor in the regular weight, and GoodUnited meaning (navigation, statuses, Messenger, supporters) uses the icons drawn in Figma. Click any icon to copy it.
Figma: 91 / Assets / IconsComplete: Every icon is imported from @/components/icons/icon-set, never from a package directly.
Complete: Phosphor icons keep their phosphoricons.com name with the Icon suffix, so MagnifyingGlass is MagnifyingGlassIcon.
Complete: Where Figma has an icon for a meaning, it replaces Phosphor everywhere (the sidebar, Clock, More, Post).
Complete: Icons are 24px with a 1.5px stroke and use currentColor, so they follow the icon and text tokens.
import { CaretDownIcon, InsightsIcon, MagnifyingGlassIcon } from '@/components/icons/icon-set'
<Button variant='outline'><MagnifyingGlassIcon /> Search</Button>
<SidebarMenuButton icon={<InsightsIcon />} label='Insights' />Navigation icons
The original sidebar icons from Figma. Use them wherever these areas are named, in the sidebar, page titles and tabs.
Product icons
GoodUnited-specific meaning drawn in Figma: statuses, Messenger subscribers, supporters, high intent and the post and clock marks.
Phosphor icons
In the set are the Phosphor icons the app uses today. All shows the whole Phosphor library: any of them can join the set with one line in icon-set.tsx, or just ask for it.
Source icons
Acquisition and revenue sources always use SourceIcon, so a source shows the same mark in legends, tracks, accordions and tables.
Facebookfacebook
Messengermessenger
Instagraminstagram
Platformplatform
Challengeschallenges
Birthdaysbirthdays
General fundraisersgeneral
Other sourcesother
Total subscriberssubscribers
Unsubscribesunsubscribes
import { SourceIcon } from '@/components/icons/source-icons'
<SourceIcon source='facebook' className='size-5' />16px · size-4Controls: buttons, inputs, selects
20px · size-5Menus, tabs and tables
24px · size-6Sidebar and page titles
Complete: Regular weight only. Other Phosphor weights are not part of the system.
Complete: Color icons with the icon tokens (text-icon-primary, text-icon-secondary, text-icon-brand).
Complete: Icon-only buttons need an aria-label. Decorative icons stay hidden from screen readers.
Not complete: No icons straight from lucide-react or @phosphor-icons/react, and no emojis as icons.
Not complete: No other sizes than 16, 20 and 24px.
