icon | React.ReactNode | (optional) A React SVG Component. |
title | string | (optional) Use a title to provide extra information about the icon used. |
border | boolean | (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. |
fill | boolean | (optional) If set to true, the icon paths will be filled with currentColor. |
alt | string | (optional) The alternative label (text version) of the icon. Defaults to the imported icon name. |
size | "default"
"small"
"medium"
"large"
"x-large"
"xx-large"
"basis"
"auto"
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. |
color | Various | (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). Defaults to no color, which means --color-black-80. |
inheritColor | boolean | (optional) Defaults to true. Set to false if you do not want to inherit the color by currentColor. |
modifier | string | (optional) Modifier class to define. Will result in: dnb-icon--${modifier}. |
animate | boolean
"once"
"loop" | (optional) Plays motion provided by an explicitly imported animated icon. Use true or once to play once, or loop to repeat the animation. |
animateWhen | "hover" | (optional) Plays an animated icon when the icon itself, or an interactive parent such as a button or link, is hovered. |
animationKey | string
number | (optional) Change this value to replay an animated icon while animate remains enabled. |
skeleton | boolean | (optional) If set to true, an overlaying skeleton with animation will be shown. |
Space | string
object | (optional) Spacing properties like top or bottom are supported. |