@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
77 lines (65 loc) • 1.71 kB
Markdown
---
title: 'Icons'
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.792Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---
# Accessibility of Icons
By using inline SVG, we have the possibility to make graphical assets both **responsive** and **interactive**. In order to do so, use the [Icon](/uilib/components/icon) component. These components provide the needed runtime processing.
## Decorative Icons
The Icon component uses `role="decoration"` by default, which makes it invisible to assistive technologies.
```tsx
render(<Icon icon={BankIcon} size="24" title="Beach" />)
```
## Responsive Icons
Use `size="auto"` to force the icon to inherit the size of its parent element.
```tsx
<H1>
My H1 with an icon <Icon icon={BankIcon} title="Beach" size="auto" />
</H1>
<H4>
My H4 with the same icon{' '}
<Icon icon={BankIcon} title="Beach" size="auto" />
</H4>
```
## SVG Icons
_Scalable Vector Graphics_ can be set up to be scalable and actually respond to the `font-size`.
```tsx
const Responsive = styled.span`
svg {
font-size: inherit;
width: 1.5em;
height: 1.5em;
}
`
const Svg = (props) => (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.03 5.22a.75.75 0 0 0-1.06 1.06l4.5 4.5a.75.75 0 0 0 1.06 0l4.5-4.5a.75.75 0 0 0-1.06-1.06L8 9.19 4.03 5.22z"
fill="#000"
/>
</svg>
)
render(
<>
<p>
<Svg width="24" height="24" /> - has a fixed size
</p>
<p>
<Responsive>
<Svg />
</Responsive>{' '}
- is responsive
</p>
</>
)
```