Icon

The Icon component provides a consistent way to display icons throughout your application. It supports various icon types, sizes, tooltips, and custom styling options.

Import

import { Icon } from 'h2o-library';

Basic Usage

Basic Icons

<div className="flex gap-4">
  <Icon icon="plus" />
  <Icon icon="chevron-right" />
  <Icon icon="close" />
</div>

Icons with Different Sizes

<div className="flex items-center gap-4">
  <Icon icon="plus" size={16} />
  <Icon icon="plus" size={24} />
  <Icon icon="plus" size={32} />
  <Icon icon="plus" size={48} />
</div>

Icons with Tooltips

<div className="flex gap-4">
  <Icon
    icon="info"
    tooltip="This is a helpful tooltip"
    tooltipPosition="top"
  />
  <Icon
    icon="search"
    tooltip="Search functionality"
    tooltipPosition="right"
  />
</div>

Available Icons

Refer to Icon Types

Interactive Examples

For interactive examples including all features and states, check out our example component:

Props

Prop	Type	Default	Description
icon	IconType	-	The type of icon to display
size	number	24	Size of the icon in pixels
tooltip	string	-	Optional tooltip text
tooltipPosition	TooltipPosition	"top"	Position of the tooltip
className	string	-	Additional CSS classes

Design Considerations

• Consistent sizing
• Clear visual appearance
• Proper spacing
• Support for tooltips
• Custom styling options
• Responsive design
• Clear visual feedback
• Proper touch targets
• Icon alignment
• Support for different contexts

Accessibility

• Proper ARIA attributes
• Screen reader support
• Clear visual indicators
• Proper contrast ratios
• Support for reduced motion
• Touch target sizes
• Tooltip accessibility
• Focus management
• Color contrast
• Text alternatives
• Keyboard navigation
• State announcements