<Icon />

Component wrapping @carbon/icons-react. List of all icons can be found here: but keys are not always 1 to 1 in a relation to the icons-react library. If you have problem verifying the key of given icon - you can always open the Chrome Terminal (with AdminBro open) and write there:


to see list of all possible icon keys.


import { Icon, IconProps } from '@admin-bro/design-system'

View Source admin-bro-design-system/src/atoms/icon.tsx, line 89


Icons inside other elements

Different sizes

Big rounded icon with background

Type Definitions


# IconProps

Prop Types of an Icon component. Apart from props defined below it extends all ColorProps and SpaceProps

Name Type Attributes Description
... string <optional>

Other props from ColorProps and SpaceProps

icon string <optional>

CamelCased name of an icon from

size 16 | 20 | 24 | 32 <optional>

Size variant. Default to 16

color string <optional>

Icon color

bg string <optional>

Icon background

rounded boolean <optional>

If background should be rounded

spin boolean <optional>

Indicates if given icons should spin

View Source admin-bro-design-system/src/atoms/icon.tsx, line 107