Skip to content

Properties

PropertiesDescription
icon(required) a React SVG Component or the icon name (in case we use IconPrimary or dnb-icon-primary).
title(optional) Use a title to provide extra information about the icon used.
border(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.
alt(optional) the alternative label (text version) of the icon. Defaults to the imported icon name.
size(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.
color(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.
inherit_color(optional) Defaults to true. Set to false if you do not want to inherit the color by currentColor.
modifier(optional) modifier class to define. Will result in: dnb-icon--${modifier}.
skeleton(optional) if set to true, an overlaying skeleton with animation will be shown.
Space(optional) spacing properties like top or bottom are supported.