@dnb/eufemia/docs/uilib/intro/09-icons.md

DNB Eufemia Design System UI Library

---
version: 11.0.0
generatedAt: 2026-04-21T13:57:53.915Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

<Intro>

# Icons

Icons are categories on two [main groups](/icons) and comes in two sizes each:

## [Primary Icons](/icons/primary)

```jsx
<Button icon="chevron_right" text="Button" />
```

## [Secondary Icons](/icons/secondary)

```jsx
import { hamburger } from `@dnb/eufemia/icons`
<Button icon={hamburger} text="Button" />
```

Primary Icons are used inside of other custom [Components](/uilib/components) and are imported by default.

It is recommended to use the [Icon Component](/uilib/components/icon) to display icons for best accessibility.

---

<IntroFooter href="/uilib/intro/10-layout" text="Next - Layout" />

</Intro>