Icon

Installation

npx usmds add icon

Usage

import { Icon } from '@components/Icon';
 
<Icon name='accessibility-new' size={24} color='#000000' />;

Props

Icon

Prop	Type	Default	Description
name	`IconName` (see available icons below)	-	The name of the icon to display. Must be one of the available icons.
size	`number`	`24`	The width and height of the icon in pixels. Icon maintains aspect ratio.
className	`string`	-	Tailwind CSS classes to style the icon, including color (e.g., 'text-red-500').

Implementation Details

The Icon component:

Uses React Native SVG with NativeWind styling
Maintains consistent viewBox scaling (24x24)
Uses currentColor for color inheritance through Tailwind classes
Provides console warning for invalid icon names

Examples

Basic Usage

<Icon name='accessibility-new' />

Custom Size

<Icon name='accessibility-new' size={32} />

Custom Color using Tailwind

<Icon name='accessibility-new' className='text-red-500' />

Styling Examples

<View className='flex-row gap-5 items-center'>
  {/* Different colors */}
  <Icon name='accessibility-new' className='text-black' />
  <Icon name='accessibility-new' className='text-red-500' />
  <Icon name='accessibility-new' className='text-blue-500' />
 
  {/* With opacity */}
  <Icon name='accessibility-new' className='text-black opacity-50' />
 
  {/* With hover states */}
  <Icon name='accessibility-new' className='text-black hover:text-blue-500' />
</View>

Available Icons

The following icons are available:

type IconName =
  | 'accessibility-new'
  | 'accessible_forward'
  | 'account_balance'
  | 'account_box'
  | 'account_circle'
  | 'add'
  | 'add_circle'
  | 'add_circle_outline'
  | 'alarm'
  | 'alternate_email'
  | 'announcement'
  | 'api'
  | 'arrow_back'
  | 'arrow_downward'
  | 'arrow_drop_down'
  | 'arrow_drop_up'
  | 'arrow_forward'
  | 'arrow_upward'
  | 'assessment'
  | 'attach_file'
  | 'attach_money'
  | 'autorenew'
  | 'backpack'
  | 'bathtub'
  | 'bedding'
  | 'bookmark'
  | 'bug_report'
  | 'calendar_today'
  | 'campaign'
  | 'camping'
  | 'cancel'
  | 'chat'
  | 'check'
  | 'check_box_outline_blank'
  | 'check_circle'
  | 'check_circle_outline'
  | 'checkroom'
  | 'clean_hands'
  | 'close'
  | 'closed_caption'
  | 'clothes'
  | 'cloud'
  | 'code'
  | 'comment'
  | 'connect_without_contact'
  | 'construction'
  | 'construction_worker'
  | 'contact_page'
  | 'content_copy'
  | 'error_outline'
  | 'face_id'
  | 'fingerprint'
  | 'info'
  | 'launch'
  | 'navigate_before'
  | 'navigate_next'
  | 'remove_circle'
  | 'visibility'
  | 'visibility_off'
  | 'volume_off'
  | 'warning'
  | 'wash'
  | 'wifi'
  | 'work'
  | 'youtube'
  | 'zoom_in'
  | 'zoom_out'
  | 'zoom_out_map';

Icon Categories

Icons are organized into functional categories:

Navigation

navigate_next
navigate_before
arrow_back
arrow_forward
arrow_upward
arrow_downward
arrow_drop_up
arrow_drop_down
zoom_in
zoom_out
zoom_out_map

Authentication & Security

face_id
fingerprint
visibility
visibility_off
check
check_circle
check_circle_outline

UI Elements

close
add
add_circle
add_circle_outline
cancel
info
error_outline
warning

Actions

launch
code
cloud
bookmark
chat
comment
content_copy
autorenew

Objects & Items

backpack
bathtub
bedding
clothes
camping
work

Media & Communication

volume_off
youtube
wifi
alternate_email

Accessibility & Users

accessibility-new
accessible_forward
account_circle
account_box
account_balance

Each icon maintains a consistent 24x24 viewBox and can be styled using Tailwind classes.

Accessibility

The Icon component:

Uses SVG for crisp rendering at any size
Supports color customization for proper contrast
Should be accompanied by descriptive text or labels when used in interactive elements
Maintains consistent sizing for visual harmony

Icon

On this page