Skip to content

Properties

PropertyTypeDescription
iconReact.ReactNode(required) a React SVG Component.
titlestring(optional) Use a title to provide extra information about the icon used.
borderboolean(optional) use true to display a rounded border with an inherited color. Keep in mind that the icon will have a larger total width and height of +0.5em.
altstring(optional) the alternative label (text version) of the icon. Defaults to the imported icon name.
sizesmall
medium
large
default
x-large
xx-large
auto
basis
number
(optional) the dimension of the icon. This will be the viewBox and represent width and height. Defaults to 16. You can use small,medium, large or auto. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a font-size.
colorVarious(optional) the color can be any valid color property, such as Hex, RGB or preferable – any CSS variable from the colors table, e.g. var(--color-ocean-green). Default is no color, which means --color-black-80.
inheritColorboolean(optional) Defaults to true. Set to false if you do not want to inherit the color by currentColor.
modifierstring(optional) modifier class to define. Will result in: dnb-icon--${modifier}.
skeletonboolean(optional) If set to true, an overlaying skeleton with animation will be shown.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.