Icons and Badges

Icons add visual clarity. A trash can icon is instantly recognizable. A colored badge communicates priority at a glance. Let's add both.

Install an icon library

"Install lucide-react for icons. Then replace the text-only buttons with icon buttons: use a Plus icon for the add button, Trash2 for delete, Check for the checkbox, and a Circle for unchecked items. Keep the buttons accessible with aria-labels."

Terminal

$npm install lucide-react

💡Info

Lucide is a popular open-source icon set with clean, consistent line icons. It's lightweight — you only import the icons you actually use, so bundle size stays small.

How Claude Code adds icons

Claude Code will import individual icons and place them in your components:

import { Plus, Trash2, Check, Circle } from 'lucide-react'
 
// In your add button:
<button aria-label="Add todo">
  <Plus className="h-4 w-4" />
</button>
 
// In your delete button:
<button aria-label="Delete todo">
  <Trash2 className="h-4 w-4" />
</button>

⚠️Warning

Always add aria-label to icon-only buttons. Without it, screen readers just see an empty button. Claude Code should do this automatically, but double-check.

Adding priority badges

If your todos have priorities, visual badges make them scannable:

"Add colored priority badges to todo items. High priority should have a red badge, Medium gets amber/yellow, and Low gets a subtle gray badge. Use small rounded pills with the text inside. Place them to the right of the todo text."

The result looks something like:

<span className="rounded-full px-2 py-0.5 text-xs font-medium bg-red-100 text-red-700">
  High
</span>

Status indicators

You can also add visual indicators for other states:

"Add a small colored dot before each todo that indicates its status. Green dot for completed, a subtle gray dot for pending. Use a 6px circle."

Install lucide-react — One command, hundreds of icons available
Replace text buttons — Swap "Delete" and "Add" text for icons
Add priority badges — Colored pills that communicate urgency
Add status dots — Quick visual scanning of completion state
Verify accessibility — Every icon button needs an aria-label

Icon sizing consistency

"Make sure all icons are consistently sized. Navigation and action icons should be 16px (h-4 w-4). If we add any decorative or empty-state icons later, those can be larger at 48px."

✅Tip

Icons should support the text, not replace it entirely. For your main actions (add, delete), the icon alone works because the context is clear. For less obvious actions, pair the icon with a text label.

Your app now communicates through visual language — icons for actions, colors for priority, dots for status. Users can scan the list and understand it at a glance.