---
title: "Icon"
description: "Decorative and linked icons with optional background."
requested_language: hu
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/hu/components/icon
version: unreleased (main)
docs_index: https://docs.systhema.app/hu/llms.txt
---
> This page isn't translated yet. Showing English.
`Icon` sizes and colors an icon from the `icon` tokens, with an optional filled background. It wraps whatever you put inside, an inline SVG, an `` by default. It has one shorthand, `Icon.a`, which renders a link (the same shape as `Button.a`, `Chip.a` and `MediaWrapper.a`). Use `as` for any other element, for example `as="div"` or `as="svg"`.
`hasBackground` adds the `icon-has-background` class: a filled, bordered tile sized by `--icon-has-background-size`, with the icon inside at `--icon-has-background-icon-size`.
```tsx preview title="Plain, with background, linked"
import { Icon } from '@systhemaui/next'
const mail =
'M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200Z'
export default function Demo() {
return (
)
}
```
Hover the two linked icons: as an ``, an icon takes the hover colors from the `colorSystem.icon.hover.*` tokens. Icons that are not links keep a flat look.
> [!NOTE]
> Changed in v1.6.0: the `Icon.span`, `Icon.div` and `Icon.svg` shorthands were removed. Write ``, `` or ``; `systhema upgrade` runs the `rewrite-icon-tag-variants` codemod for you. See the [v1.6.0 release notes](../release-notes/v1.6.0.md).
## Examples
### The SVG as the icon
With `as="svg"` the icon element is the SVG itself, which saves a wrapper.
```tsx preview title="SVG as the icon"
import { Icon } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### An image as the icon
Children are sized to fill the icon with `object-fit: contain`, so a raster or SVG file works as well as inline markup.
```tsx preview title="Image icon"
import { Icon } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### SVG markup from the CMS
The Icon block stores an icon as an SVG string. Render it with `dangerouslySetInnerHTML`, and only for markup you trust.
```tsx
import { Icon } from '@systhemaui/next'
export function CmsIcon({ svg }: { svg: string }) {
return ` attributes | | | |
## HTML and CSS
Without React, add `icon` (and `icon-has-background`) to any element around the SVG:
```html
```
The hover rules match `.icon:is(a):hover`, so only a link icon changes color on hover.
| Class | Styles |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `icon` | `:where(.icon) { display: inline-block; width: var(--icon-size); height: var(--icon-size); font-size: var(--icon-size); line-height: var(--icon-size); color: var(--color-icon-normal-color); }``. Internal links prefetch and navigate on the client, and hash links smooth-scroll, as with `Button.a` and `Card.link`. The social icons of the simple footer use `Icon.a`, so they get the same behavior.
```tsx
import { Icon } from '@systhemaui/next'
export function SettingsShortcut() {
return (
)
}
```
## Accessibility
- `Icon` adds no ARIA of its own. Mark a decorative icon `aria-hidden="true"`, and give a real `` `focusable="false"`.
- A linked `Icon.a` has no visible text, so it needs an `aria-label` that names the destination. The Icon block derives one from the link when the editor leaves it empty.
- Give an icon one name only: an `aria-label` on the link, or `alt` text on an ` 