Design Components & Context Hub

Import

import { FilledIcon } from "@timelycare/helix-ui"
import { Home } from "lucide-react"

Props

Prop	Type	Default	Description
`icon`	`LucideIcon`	—	A Lucide React icon component. Required unless the icon is passed as `children`
`children`	`ReactNode`	—	Alternative to `icon` — pass a rendered icon node; the container sizes the nested SVG
`size`	`"24" \| "32" \| "40" \| "48" \| "60"`	`"40"`	Container size in pixels
`tone`	`"info" \| "neutral" \| "success" \| "warning" \| "destructive"`	`"info"`	Container tone
`className`	`string`	—	Extra classes applied to the container

Sizes

Size	Container	Icon	Container class	Icon class
`"24"`	24px	14px	`size-6`	`[&_svg]:size-3.5`
`"32"`	32px	20px	`size-8`	`[&_svg]:size-5`
`"40"`	40px	24px	`size-10`	`[&_svg]:size-6`
`"48"`	48px	32px	`size-12`	`[&_svg]:size-8`
`"60"`	60px	40px	`size-[60px]`	`[&_svg]:size-10`

Default size is "40". All sizes use a uniform 8px corner radius (rounded-md). Padding between the container edge and the icon emerges from the size difference (~5–10px depending on size) and stays visually even via flex-centering.

Tones

The default info tone is the brand navy identifier (tc-navy-100, via the accent token). The status tones reuse the Badge outline hues — a light tinted fill with a solid icon color, no border: success/warning/destructive at the -100 stop; neutral uses bg-muted (a warm light-sand surface — = tc-light-sand-100 — that flips to gray in dark). This is the KPI-chip treatment MetricCard composes.

In dark mode the status tones flip to a deep -700 fill with a light -50 icon, mirroring the default's flip; info (accent) and neutral (muted) flip automatically via their semantic tokens.

Tone	Container (light)	Icon (light)	Container (dark)	Icon (dark)
`info` (default)	`bg-accent`	`text-accent-foreground`	(accent flips)	(accent flips)
`neutral`	`bg-muted`	`text-muted-foreground`	(muted flips to gray)	`text-tc-gray-50`
`success`	`bg-tc-sage-100`	`text-tc-sage-600`	`bg-tc-sage-700`	`text-tc-sage-50`
`warning`	`bg-tc-orange-100`	`text-tc-orange-900`	`bg-tc-orange-700`	`text-tc-orange-50`
`destructive`	`bg-tc-berry-100`	`text-tc-berry-600`	`bg-tc-berry-700`	`text-tc-berry-50`

Colors are fully theme-aware — no extra dark-mode classes needed.

Usage

// Default (40px)
<FilledIcon icon={Home} />

// Explicit sizes
<FilledIcon icon={Home} size="32" />
<FilledIcon icon={Home} size="48" />
<FilledIcon icon={Home} size="60" />

// In a nav item
<div className="flex items-center gap-2">
  <FilledIcon icon={CalendarDays} size="40" />
  <span>Schedule</span>
</div>

// Status tone (KPI chip)
<FilledIcon icon={Activity} size="32" tone="success" />

// Icon passed as children (for callers holding a rendered node)
<FilledIcon size="32" tone="info"><Activity /></FilledIcon>

Higher Ed Icon Mappings

These are the canonical icon assignments for each product area. Use size="40" for navigation and size="32" for dense lists.

Member

Nav Item	Icon
TalkNow	`MessageCircleHeart`
MedicalNow	`Stethoscope`
Health Coaching	`HeartPlus`
Psychiatry	`Brain`
Counseling	`NotebookPen`
Medical	`BriefcaseMedical`
Self Care	`HandHeart`
Basic Needs	`HeartHandshake`
Community	`MessageSquareText`
Messages	`Mail`
Success Coaching	`Trophy`
Home	`Home`
Provider Care	`ShieldUser`

Campus

Nav Item	Icon
Home	`Home`
Members	`CircleUser`
Referrals	`ClipboardPaste`
Messages	`Mail`
Client Card	`IdCard`
Resource Cards	`LayoutList`
Reports	`ChartPie`
Manage Accounts	`Users`
Account	`UserCog`

Provider

Nav Item	Icon
Home	`Home`
Schedule	`CalendarDays`
Queue	`Clock`
Members	`CircleUser`
Messages	`Mail`
Past Visits	`ClipboardList`
Reports	`ChartPie`
Policies	`FileText`

Admin

Nav Item	Icon
Dashboard	`Grid2x2`
Queue	`Clock`
Schedule	`CalendarDays`
Visits	`CircleUser`
Members	`CircleUser`
Messages	`Mail`
Customers	`Landmark`
Providers	`ShieldUser`
Users	`Users`
Community	`MessageSquareText`
Crisis Now	`TriangleAlert`
Care	`HeartHandshake`

K12 Admin

Nav Item	Icon
Dashboard	`Grid2x2`
Clients	`Users`
Visit Management	`Calendar`
Visit Pools	`SquareGanttChart`
Users	`User`
Providers	`Stethoscope`

K12 School

Nav Item	Icon
Home	`Home`
Students	`Users`
Insights	`BarChart2`
User Management	`UserPlus`
Schools	`School`

K12 Parent

Nav Item	Icon
Home	`Home`
[Child Name]	`User`
Documents	`FileText`
Help	`CircleHelp`

K12 Student

Nav Item	Icon
Home	`Home`
Schedule a Visit	`Calendar`
My Visits	`Calendar`
Documents	`FileText`
Help	`CircleHelp`

TimelyPulse

Nav Item	Icon
Dashboard	`LayoutDashboard`
Signals	`MessageCircleWarning`
Campaigns	`Megaphone`
Surveys	`ClipboardList`
Students	`GraduationCap`
Knowledge Base	`BookOpen`

Design Decisions

"Filled" = filled container, not filled SVG. Icons remain Lucide stroke style. The filled appearance comes from the tinted container (bg-accent by default; a /10 tint for status tones).
Uniform 8px radius. All sizes use rounded-md (8px). Padding between the container edge and the icon emerges from the container/icon size difference (~5–10px), not a fixed value.
One primitive for two jobs. The same component serves nav/product identifiers (accent tone) and KPI status chips (status tones), so MetricCard composes it instead of hand-rolling a bubble.
shrink-0 on both container and icon. Prevents the component from collapsing in flex layouts.

Added: April 2026 · Source: Helix Design Library (Figma node 19392:971)