---
description: >-
version: 11.17.0
generatedAt: 2026-11-05T09:55:46.934Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Icons

<Intro>

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

## [Primary Icons](/web/components/icon/usage/#primary-icons)

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

## [Secondary Icons](/web/components/icon/usage/#secondary-icons)

```jsx
import { hamburger } from '@dnb/eufemia/icons'

render(<Button icon={hamburger} text="Button" />)
```

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

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

---

<IntroFooter
  href="/web/get-started/guided-introduction/10-layout"
  text="Next - Layout"
/>

</Intro>