List of customizable icons
All icons in the theme package share these common properties:
color (string) - optional color property that can be set using CSS color variablessize (string) - optional size propertyclassName (string) - optional CSS class name- standard SVG properties (inherited from
React.SVGProps<SVGSVGElement>)
import { iconName } from '@redocly/theme/icons/{iconName}/{iconName}';Document Icons
| Icon | Name |
|---|
| DocumentIcon |
| DocumentBlankIcon |
| DocumentAddIcon |
File System Icons
| Icon | Name |
|---|
| FileIcon |
| FileStorageIcon |
| FolderIcon |
| FolderAddIcon |
| FolderMoveToIcon |
| ApiFilesReplayIcon |
UI Control Icons
| Icon | Name |
|---|
| CheckboxFilledIcon |
| CloseFilledIcon |
| CloseOutlineIcon |
| DeselectIcon |
| EditIcon |
| FilterIcon |
| HorizontalViewIcon |
| MenuIcon |
| MobileSidebarIcon |
| OverflowMenuHorizontalIcon |
| OverflowMenuVerticalIcon |
| SelectIcon |
| SidePanelCloseIcon |
| SidePanelOpenIcon |
| SpinnerIcon |
| VerticalViewIcon |
| ViewIcon |
| ViewOffIcon |
Action Icons
| Icon | Name |
|---|
| DownloadIcon |
| ExportIcon |
| LaunchIcon |
| LinkIcon |
| LogoutIcon |
| MaximizeIcon |
| MinimizeIcon |
| PlusCustomIcon |
| ResetIcon |
| RestartIcon |
| SaveIcon |
| SearchIcon |
| SettingsIcon |
| SettingsCogIcon |
| SubtractIcon |
| TrashCanIcon |
Status Icons
| Icon | Name |
|---|
| ErrorIcon |
| ErrorFilledIcon |
| InformationIcon |
| InformationFilledIcon |
| StarIcon |
| StarFilledIcon |
| WarningAltIcon |
| WarningAltFilledIcon |
| WarningFilledIcon |
| WarningSquareIcon |
Feature Icons
| Icon | Name |
|---|
| DataRefineryIcon |
| DraggableIcon |
| FlowIcon |
| PlaylistIcon |
| RocketIcon |
| TaskViewIcon |
| WorkflowAutomationIcon |
User Interface Icons
| Icon | Name |
|---|
| EmailIcon |
| FaceDissatisfiedIcon |
| FaceNeutralIcon |
| FaceSatisfiedIcon |
| GlobalOutlinedIcon |
| JsonIcon |
| MoonIcon |
| RecentlyViewedIcon |
| RenewIcon |
| SecurityIcon |
| SunIcon |
| TableBuiltIcon |
| TimeIcon |
| UserIcon |
| ValueVariableIcon |
| HashtagIcon |
Special Icons
| Icon | Name |
|---|
| IBMCloudHyperProtectCryptoServicesIcon |
| CertificateIcon |
For Font Awesome icons in React components, see the dedicated Font Awesome Icons component documentation.