# List of customizable icons

Customize the `icon` component to influence styling of icons in your project.

## Icon Properties

All icons in the theme package share these common properties:

- `color` (`string`) - optional color property that can be set using CSS color variables
- `size` (`string`) - optional size property
- `className` (`string`) - optional CSS class name
- standard SVG properties (inherited from `React.SVGProps<SVGSVGElement>`)

## Import

```tsx
import { IconName } from '@redocly/theme/icons/{IconName}/{IconName}';
```

**details**

**summary**

Document Icons
| Icon | Name |
| --- | --- |
| **DocumentIcon** | `DocumentIcon` |
| **DocumentBlankIcon** | `DocumentBlankIcon` |
| **DocumentAddIcon** | `DocumentAddIcon` |

**details**

**summary**

File System Icons
| Icon | Name |
| --- | --- |
| **FileIcon** | `FileIcon` |
| **FileStorageIcon** | `FileStorageIcon` |
| **FolderIcon** | `FolderIcon` |
| **FolderAddIcon** | `FolderAddIcon` |
| **FolderMoveToIcon** | `FolderMoveToIcon` |

**details**

**summary**

UI Control Icons
| Icon | Name |
| --- | --- |
| **CheckboxFilledIcon** | `CheckboxFilledIcon` |
| **CloseFilledIcon** | `CloseFilledIcon` |
| **CloseOutlineIcon** | `CloseOutlineIcon` |
| **DeselectIcon** | `DeselectIcon` |
| **EditIcon** | `EditIcon` |
| **FilterIcon** | `FilterIcon` |
| **HorizontalViewIcon** | `HorizontalViewIcon` |
| **MenuIcon** | `MenuIcon` |
| **MobileSidebarIcon** | `MobileSidebarIcon` |
| **OverflowMenuHorizontalIcon** | `OverflowMenuHorizontalIcon` |
| **OverflowMenuVerticalIcon** | `OverflowMenuVerticalIcon` |
| **SelectIcon** | `SelectIcon` |
| **SidePanelCloseIcon** | `SidePanelCloseIcon` |
| **SidePanelOpenIcon** | `SidePanelOpenIcon` |
| **SpinnerIcon** | `SpinnerIcon` |
| **VerticalViewIcon** | `VerticalViewIcon` |
| **ViewIcon** | `ViewIcon` |
| **ViewOffIcon** | `ViewOffIcon` |

**details**

**summary**

Action Icons
| Icon | Name |
| --- | --- |
| **DownloadIcon** | `DownloadIcon` |
| **ExportIcon** | `ExportIcon` |
| **LaunchIcon** | `LaunchIcon` |
| **LinkIcon** | `LinkIcon` |
| **LogoutIcon** | `LogoutIcon` |
| **MaximizeIcon** | `MaximizeIcon` |
| **MinimizeIcon** | `MinimizeIcon` |
| **PlusCustomIcon** | `PlusCustomIcon` |
| **ResetIcon** | `ResetIcon` |
| **RestartIcon** | `RestartIcon` |
| **SaveIcon** | `SaveIcon` |
| **SearchIcon** | `SearchIcon` |
| **SettingsIcon** | `SettingsIcon` |
| **SettingsCogIcon** | `SettingsCogIcon` |
| **SubtractIcon** | `SubtractIcon` |
| **TrashCanIcon** | `TrashCanIcon` |

**details**

**summary**

Status Icons
| Icon | Name |
| --- | --- |
| **ErrorIcon** | `ErrorIcon` |
| **ErrorFilledIcon** | `ErrorFilledIcon` |
| **InformationIcon** | `InformationIcon` |
| **InformationFilledIcon** | `InformationFilledIcon` |
| **StarIcon** | `StarIcon` |
| **StarFilledIcon** | `StarFilledIcon` |
| **WarningAltIcon** | `WarningAltIcon` |
| **WarningAltFilledIcon** | `WarningAltFilledIcon` |
| **WarningFilledIcon** | `WarningFilledIcon` |
| **WarningSquareIcon** | `WarningSquareIcon` |

**details**

**summary**

Feature Icons
| Icon | Name |
| --- | --- |
| **DataRefineryIcon** | `DataRefineryIcon` |
| **DraggableIcon** | `DraggableIcon` |
| **FlowIcon** | `FlowIcon` |
| **PlaylistIcon** | `PlaylistIcon` |
| **RocketIcon** | `RocketIcon` |
| **TaskViewIcon** | `TaskViewIcon` |
| **WorkflowAutomationIcon** | `WorkflowAutomationIcon` |

**details**

**summary**

User Interface Icons
| Icon | Name |
| --- | --- |
| **EmailIcon** | `EmailIcon` |
| **FaceDissatisfiedIcon** | `FaceDissatisfiedIcon` |
| **FaceNeutralIcon** | `FaceNeutralIcon` |
| **FaceSatisfiedIcon** | `FaceSatisfiedIcon` |
| **GlobalOutlinedIcon** | `GlobalOutlinedIcon` |
| **JsonIcon** | `JsonIcon` |
| **MoonIcon** | `MoonIcon` |
| **RecentlyViewedIcon** | `RecentlyViewedIcon` |
| **RenewIcon** | `RenewIcon` |
| **SecurityIcon** | `SecurityIcon` |
| **SunIcon** | `SunIcon` |
| **TableBuiltIcon** | `TableBuiltIcon` |
| **TimeIcon** | `TimeIcon` |
| **UserIcon** | `UserIcon` |
| **ValueVariableIcon** | `ValueVariableIcon` |
| **HashtagIcon** | `HashtagIcon` |
| **ColorPaletteIcon** | `ColorPaletteIcon` |

**details**

**summary**

Special Icons
| Icon | Name |
| --- | --- |
| **IBMCloudHyperProtectCryptoServicesIcon** | `IBMCloudHyperProtectCryptoServicesIcon` |
| **CertificateIcon** | `CertificateIcon` |

## Font Awesome Icons

For Font Awesome icons in React components, see the dedicated [Font Awesome Icons component documentation](/docs/realm/customization/react-components/list/fontawesome-icons).

## Resources

- **[Built-in React components](/docs/realm/customization/react-components/list)** - Browse all available built-in React components that you can customize and extend in your projects
- **[Font Awesome Icons React component](/docs/realm/customization/react-components/list/fontawesome-icons)** - Use Font Awesome icons in React components with full CDN support and customization options