# List of customizable icons

## 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` |
|  | `DocumentBlankIcon` |
|  | `DocumentAddIcon` |


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


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


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


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


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


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


details
summary
Special Icons
| Icon | Name |
|  --- | --- |
|  | `IBMCloudHyperProtectCryptoServicesIcon` |
|  | `CertificateIcon` |


## Resources

- **[List of customizable components](/docs/realm/customization/react-components/list)** - Browse all available built-in React components that you can customize and extend in your projects