Iconography & Imagery
Guidelines for using icons and visual elements consistently across the TpGroup design system.
Icon Library
We use Lucide React as our primary icon library. It provides 1000+ consistent, open-source icons.
Navigation
Icons for primary navigation and wayfinding
Actions
Icons for user actions and interactions
Status & Feedback
Icons for system feedback and status indication
Common UI
Frequently used interface elements
Education (TpEMIS, TpLEARN)
Icons for education and learning products
Real Estate (TpESTATE, Kent)
Icons for real estate and property development
Tourism (FambulTik)
Icons for heritage tourism and travel
Technology (TpISENT)
Icons for ICT consultancy and tech solutions
Non-Profit & Impact
Icons for social impact and community work
Business & Finance
Icons for business operations
Design System & Documentation
Icons used in design principles, content guidelines, and documentation
Icon Sizes
Standardized icon sizes ensure visual consistency and proper hierarchy.
Small (16px)
Inline with text, compact UI elements, badges
className="h-4 w-4"Medium (20px)
Default size for most UI elements, buttons, inputs
className="h-5 w-5"Large (24px)
Primary actions, navigation, emphasis
className="h-6 w-6"XL (32px)
Feature highlights, empty states, hero sections
className="h-8 w-8"2XL (48px)
Large cards, promotional content, landing pages
className="h-12 w-12"Semantic Color Usage
Icons should use semantic color tokens to convey meaning consistently.
Success
var(--success)Confirmations, completed actions, positive status
Error
var(--error)Errors, destructive actions, critical alerts
Warning
var(--warning)Cautions, important notices, pending states
Information
var(--color-accent)Helpful tips, neutral information, guidance
Accessibility Guidelines
Icons must be accessible to all users, including those using screen readers and assistive technologies.
Always include text labels
Icons should never stand alone without accessible text. Use aria-label or visible labels.
Good: <button aria-label="Delete item"><Trash2 /></button>Maintain 3:1 contrast ratio
Icons must have sufficient contrast against their background (WCAG 2.2 AA).
Verify with color contrast checker toolsTouch target minimum 44x44px
Interactive icons need adequate touch area, especially on mobile devices.
Wrap small icons in larger clickable containersUse semantic colors
Apply color variables for status icons to maintain consistency and accessibility.
Success: var(--success), Error: var(--error), Warning: var(--warning)Icon with Text Patterns
Common patterns for combining icons with text labels.
Leading Icon
Trailing Icon
Icon Above Text
Icon with Badge
Imagery Guidelines
Best practices for using photography and illustrations in TpGroup products.
Authentic Representation
Use photography that authentically represents our diverse audience: Sierra Leoneans, African Americans, other West Africans, and diaspora communities. Avoid stock photos that feel generic or culturally insensitive.
Image Formats & Performance
Optimize images for low-bandwidth African markets:
- • AVIF format first (50-80% smaller than JPEG)
- • WebP fallback for broader support
- • JPEG/PNG as last resort
- • SVG for all icons and simple illustrations
- • Lazy loading for below-the-fold images
- • Maximum 500 KB total page weight
Aspect Ratios
Standard aspect ratios for consistency:
- • 16:9 - Hero images, video thumbnails
- • 4:3 - Content cards, featured images
- • 1:1 - Profile pictures, square grids
- • 21:9 - Ultra-wide banners
Accessibility for Images
Always provide meaningful alt text describing the content and context of images. Decorative images should have empty alt="" attributes.