# Size.

## Element Sizes.

| CSS custom property | zero | small | large | ultra |
| --- | --- | --- | --- | --- |
| `--sbb-size-element-xxxs` | 28px | 28px | 32px | 32px |
| `--sbb-size-element-xxs` | 32px | 32px | 36px | 36px |
| `--sbb-size-element-xs` | 36px | 36px | 40px | 40px |
| `--sbb-size-element-s` | 44px | 44px | 48px | 48px |
| `--sbb-size-element-m` | 48px | 48px | 56px | 56px |
| `--sbb-size-element-l` | 56px | 56px | 64px | 64px |

## Icon UI Sizes.

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-size-icon-ui-extra-small` | 16px |
| `--sbb-size-icon-ui-small` | 24px |
| `--sbb-size-icon-ui-medium` | 36px |
| `--sbb-size-icon-ui-large` | 48px |

---

Source: https://digital.sbb.ch/de/design-system/lyne/design-tokens/size/