---
title: SVG and CSS icon usage
description: Technical details about Eufemia Icons.
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.177Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---
# SVG and CSS icon usage
At DNB we are using Streamline icons as our source for off-the-shelf vector icons.
[Link to streamlineicons.com](https://www.streamlineicons.com/)
## Using Icons
The icons are in SVG format and are optimized for performance and to have the smallest footprint possible in the package build process.
The sources are included in the `@dnb/eufemia` package and published as public
[stable and immutable CDN files](/web/ai-tools-and-resources/asset-cdn/#stable-and-versioned-urls).
For example:
```text
https://assets.eufemia.dnb.no/v11.14.1/icons/dnb/home.svg
https://assets.eufemia.dnb.no/icons/dnb/home.svg
```
They also exist as [React Components](/web/components/icon) to be easily integrated, without the need of an additional SVG file loader.
## Icon color
Eufemia SVG icons simply inherit the current color. In case you do not use the [Icon component](/web/components/icon), you have to handle colors yourself.
For icons that communicate a state, follow the [status icon pattern](/web/patterns-and-extensions/status-icon) for sizing, semantic colors, dark mode and accessibility.
### Change SVG border color
```css
.selector svg {
color: var(--custom-color);
}
```
### Example color usage
```css
color: var(--custom-color);
.selector svg {
color: inherit;
fill: currentColor;
stroke: currentColor;
}
```
## Sizing
Eufemia icons come in **two** sizes:
- **Default Size** 1.0rem with 1.5px stroke weight
- **Medium Size** 1.5rem with 1.5px stroke weight
The reason there are two sizes is mainly due to the SVG artifact that the icons, alongside the strokes, will scale up once we use them with a larger width and height.
### Scalability in web
To ensure that the relative size of the SVG icons is scalable by the inherited CSS font size, do not explicitly specify the SVG.
**Example size definition by CSS**
```css
font-size: 1.5rem;
svg {
width: 1em;
height: 1em;
font-size: inherit;
}
```
## Spacing
Icons should have a minimum area of 8px between them and their nearest neighbor.
## Custom Icons
[Streamline](https://www.streamlineicons.com/) caters to pretty much all of Eufemia's icon needs. However, sometimes there is a need for a custom icon. In these cases please contact one of Eufemia's [design leads](/about/contact).
## Primary icons
The Primary Icons are used inside Eufemia [components](/web/components/overview) and are also bundled as a [UMD Package](https://unpkg.com/@dnb/eufemia@latest/umd/dnb-ui-icons.min.js).
Primary Icons can easily be defined and included in components, for instance, in [Buttons](/web/components/button).
They are integrated by using the [IconPrimary](/web/components/icon-primary) component.
## React example usage
```jsx
```
You can also import them like the [Secondary](/web/components/icon/usage/#secondary-icons) icons:
```jsx
import { bell_medium, chevron_right } from '@dnb/eufemia/icons'
```
Browse the [shared icon catalogue](/collections/icons/) and use its primary filter.
## Secondary icons
The Secondary Icons are an addition to the [Primary Icons](/web/components/icon/usage/#primary-icons). They extend the possibility to have more icons that are not primarily used. They do not ship integrated, as the [Primary Icons](/web/components/icon/usage/#primary-icons) do.
The Secondary Icons can be extended infinitely.
**Technically:** As a consequence, they have to be [imported](/web/components/icon) wherever they are used.
### Importing secondary icons
```jsx
import { hamburger_medium as HamburgerIcon, bubble } from '@dnb/eufemia/icons'
/* <-- is not recommended, but possible */
```
Browse the [shared icon catalogue](/collections/icons/) and use its secondary filter.
## Other component icons
Some icons belong to a component rather than the shared catalogue.
## Use the [**FormStatus**](/web/components/form-status) icons only
- `InfoIcon`
- `SuccessIcon`
- `WarnIcon`
- `ErrorIcon`
- `MarketingIcon`
```jsx
import { InfoIcon } from '@dnb/eufemia/components/FormStatus'
render()
```
... or in combination with the [Icon](/web/components/icon) component. Have a look [at this example](/web/components/form-status#in-combination-with-the-icon-component).
Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization).
## Properties
```json
{
"props": {
"icon": {
"doc": "A React SVG component or an icon name. Names load from the asset CDN. Set `iconBaseUrl` on [Provider](/web/styling-and-themes/configuration/provider) to use self-hosted SVGs. IconPrimary uses bundled primary icons before falling back to the CDN.",
"type": [
"React.ReactNode",
"string"
],
"status": "optional"
},
"title": {
"doc": "Use a title to provide extra information about the icon used.",
"type": "string",
"status": "optional"
},
"border": {
"doc": "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`.",
"type": "boolean",
"status": "optional"
},
"fill": {
"doc": "If set to `true`, the icon paths will be filled with `currentColor`.",
"type": "boolean",
"status": "optional"
},
"alt": {
"doc": "The alternative label (text version) of the icon. Defaults to the imported icon name.",
"type": "string",
"status": "optional"
},
"size": {
"doc": "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`.",
"type": [
"\"default\"",
"\"small\"",
"\"medium\"",
"\"large\"",
"\"x-large\"",
"\"xx-large\"",
"\"basis\"",
"\"auto\"",
"number"
],
"status": "optional"
},
"color": {
"doc": "The color can be any valid color property, such as Hex, RGB or preferable – any CSS variable from the [colors table](/web/styling-and-themes/legacy-colors), e.g. `var(--color-ocean-green)`. Defaults to no color, which means `--color-black-80`.",
"type": "Various",
"status": "optional"
},
"inheritColor": {
"doc": "Defaults to `true`. Set to `false` if you do not want to inherit the color by `currentColor`.",
"type": "boolean",
"status": "optional"
},
"modifier": {
"doc": "Modifier class to define. Will result in: `dnb-icon--${modifier}`.",
"type": "string",
"status": "optional"
},
"animate": {
"doc": "Plays motion provided by an explicitly imported animated icon. Use `true` or `once` to play once, or `loop` to repeat the animation.",
"type": [
"boolean",
"\"once\"",
"\"loop\""
],
"status": "optional"
},
"animateWhen": {
"doc": "Plays an animated icon when the icon itself, or an interactive parent such as a button or link, is hovered.",
"type": "\"hover\"",
"status": "optional"
},
"animationKey": {
"doc": "Change this value to replay an animated icon while `animate` remains enabled.",
"type": [
"string",
"number"
],
"status": "optional"
},
"skeleton": {
"doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
"type": "boolean",
"status": "optional"
},
"[Space](/web/layout-and-typography/layout/space/properties)": {
"doc": "Spacing properties like `top` or `bottom` are supported.",
"type": [
"string",
"object"
],
"status": "optional"
}
},
"usageGuidance": "Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. [Read about intended use and customization](/web/styling-and-themes/configuration/component-properties/#intended-use-and-customization)."
}
```