Foundations
Icons, logos, and media
Lucide SVGs and the existing local Font Awesome glyphs coexist in the redesigned interface.
On this page
Source families
New navigation, appearance, curriculum, and player controls use lucide-react SVG icons. Existing fields, resources, and provider controls retain Font Awesome 7 Sharp and Brands fonts. Both repositories host their icon fonts locally. Document this mixed implementation rather than claiming that one family replaced every icon.
Usage contracts
- Keep a visible action label where space allows; use an explicit accessible name for icon-only controls.
- Decorative icons should not repeat the control name to assistive technology.
- Preserve provider logos on the white .connection-logo surface so dark theme does not distort brand artwork.
- AssetImage normalizes source URLs; missing covers and avatars use the existing placeholders.
- The captured lesson poster is an offline demonstration, not a playable or customer-owned lesson.
Source references
| File | Responsibility |
|---|---|
| src/components/ClientOnlyIcon.tsx | Client-mounted glyphs |
| src/components/AssetImage.tsx | Image wrapper |
| src/components/ThemeProvider.tsx | Lucide appearance controls |
| src/app/globals.css | Local icon faces and logo handling |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0