Custom Icons

Learn how to customize the checkbox icons to match your design system.

Example

Custom Icons

Checkbox with custom icons

Usage

Basic Icon Customization

import { CheckIcon } from '@heroicons/react/24/solid';
 
<Checkbox 
  checkedIcon={<CheckIcon className="w-4 h-4" />}
>
  Custom Check Icon
</Checkbox>

Different Icons for States

import { CheckIcon, MinusIcon } from '@heroicons/react/24/solid';
 
<Checkbox 
  icon={<CheckIcon className="w-4 h-4" />}
  indeterminateIcon={<MinusIcon className="w-4 h-4" />}
>
  Multiple Icons
</Checkbox>

With Animation

const AnimatedCheckIcon = () => (
  <svg
    className="transition-transform duration-200 ease-in-out"
    // ... other SVG props
  >
    {/* SVG path */}
  </svg>
);
 
<Checkbox checkedIcon={<AnimatedCheckIcon />}>
  Animated Icon
</Checkbox>

Icon Props

Prop	Type	Description
`icon`	`ReactNode`	Default icon shown when checked
`checkedIcon`	`ReactNode`	Alternative icon for checked state
`indeterminateIcon`	`ReactNode`	Icon shown in indeterminate state

Best Practices

Icon Sizing:
- Match icon size with checkbox size
- Use consistent sizing across your app
- Consider touch targets on mobile
Accessibility:
- Ensure icons have good contrast
- Add appropriate ARIA labels
- Test with screen readers
Performance:
- Optimize SVG icons
- Consider using icon libraries
- Lazy load complex icons
Design:
- Maintain visual hierarchy
- Use consistent style
- Consider animation for better UX

Custom Icons

On this page