Foundations
Icons
சின்னங்கள்
Tamil DS uses Lucide React for interface icons and Google Noto Emoji for content. Icons should be quiet, consistent, and paired with text when meaning matters.
UI சின்னங்களுக்கு Lucide React. உள்ளடக்கத்திற்கு Google Noto Emoji.
Icon library
Use Lucide React icons at 16px inside controls and 20px in standalone documentation examples. Keep the default stroke width and let icons inherit color from the parent text.
Navigation
வழிசெலுத்தல்
Actions
செயல்கள்
Communication
தொடர்பு
Status
நிலை
System
கணினி
Google emojis
Use emoji only in content examples and friendly empty states. Do not use emoji as the only signal for status or navigation.
Vanakkam
வணக்கம்
Paddy
நெல்
Document
ஆவணம்
Warning
எச்சரிக்கை
Done
முடிந்தது
Location
இடம்
Usage rules
- Size icons with
h-4 w-4inside controls andh-5 w-5in standalone examples. - Use
currentColor; do not hard-code icon colors. - Decorative icons should be hidden from assistive technology.
- Meaningful icon-only controls need an accessible label.
- Pair status icons with text labels.
Icon usage with Tamil labels
Icons in Tamil-language interfaces carry extra responsibility. The following rules apply wherever Tamil is the primary script of the surface.
Always pair an icon with a Tamil label on public-service pages.
Never use icon-only controls without an aria-label. Citizens may not recognise abstract metaphors — the label is the primary affordance, the icon is support.
Match icon size to its visual context.
size-4 (16px) for inline and button icons. size-5 (20px) for section markers and standalone examples. size-6 (24px) for feature cards and hero callouts.
Use flex items-center gap-2 for icon + text pairs.
Icons must be baseline-aligned with adjacent text. Avoid manual top offsets — they break at different font sizes and line heights.
Choose universally understood icons for Tamil UI.
Avoid culturally specific metaphors (e.g. a mailbox icon that assumes Western postal architecture). Prefer universal symbols like magnifying glass for search, tick for success, and bell for notification.
Lucide icon reference (common patterns)
The twelve most frequently used icons across Tamil DS — their correct import and their intended role in the system.
| Icon | Import | Use in Tamil DS |
|---|---|---|
ArrowRight | lucide-react | Link affordance, CTA buttons |
Check | lucide-react | Success states, checklists |
X | lucide-react | Close, remove, dismiss |
Search | lucide-react | Search bars, command palette |
Menu | lucide-react | Mobile hamburger |
ChevronDown | lucide-react | Accordions, selects |
AlertTriangle | lucide-react | Warnings, validation errors |
Info | lucide-react | Helper text, AI disclaimers |
Sparkles | lucide-react | AI features, Kural AI |
Languages | lucide-react | Bilingual toggle, Tamil features |
ShieldCheck | lucide-react | WCAG compliance, security |
Moon / Sun | lucide-react | Theme toggle |