Neo-Brutalist Angular Icon

Icon

nbIcon is an attribute directive that renders any SVG asset as a sized, colored, accessible icon. Mask mode (default) paints monochrome SVGs with the current color. Image mode preserves original colors for illustrated assets. Composable with chips, buttons, and any other primitive.

5Sizes

10Tones

2Modes

6Inputs

Source ↗Open Docs

Preview

Usage

Add nbIcon to any <span>. Provide a src path and mark the icon as decorative or give it a label. The src input is intended for trusted local icon/image assets; do not pass unsanitized user-generated URLs.

Import

import { NbIcon } from '@ng-brutalism/ui';

Template

<!-- Decorative icon (no meaning beyond adjacent text) -->
<span nbIcon src="/icons/plane.svg" size="sm" decorative></span>

<!-- Meaningful standalone icon -->
<span nbIcon src="/icons/warning.svg" size="md" tone="danger" label="Warning"></span>

<!-- Larger, colored icon -->
<span nbIcon src="/icons/star.svg" size="xl" tone="warning" decorative></span>

<!-- Image mode for colorful/illustrated assets -->
<span nbIcon src="/icons/avatar-badge.png" mode="image" size="xl" label="Verified"></span>

Sizes

xs0.75rem

sm1rem

md1.25rem

lg1.5rem

xl2rem

Tones

Tones map to design tokens and adapt automatically when the theme changes. current (default) inherits the CSS color of the parent element.

current

default

muted

inverse

primary

secondary

accent

danger

success

warning

Modes

mode="mask" (default) applies the SVG as a CSS mask and paints it with the active tone color — ideal for monochrome SVG icons that should follow the theme. mode="image" renders the asset as a background image and preserves its original colors — use this for colorful illustrations or PNGs.

mask (default)painted by tone

imageoriginal colors

Accessibility

Icons must be explicitly marked as decorative or meaningful. There is no silent default — always provide either decorative or label. Avoid rendering a bare visual icon with neither.

Decorative icon — adds no meaning; hidden from screen readers. Use decorative.

Meaningful icon — communicates information; needs a label. Use label="...".

decorativearia-hidden="true"

label="Top rated"role="img"

Composition

Because nbIcon is a directive it drops into any container without adding a wrapper element.

Flight included Hotel Top pick

API

Input	Type	Default	Description
src	string	required	Path to a trusted local SVG or image asset. Do not pass unsanitized user-generated URLs.
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Icon size (0.75 rem – 2 rem).
tone	'current' \| 'default' \| 'muted' \| 'inverse' \| 'primary' \| 'secondary' \| 'accent' \| 'danger' \| 'success' \| 'warning'	'current'	Color tone. `current` inherits the parent CSS color. Only applies in mask mode.
mode	'mask' \| 'image'	'mask'	Rendering mode. `mask` paints the SVG with the tone color. `image` preserves original asset colors.
decorative	boolean	false	Marks the icon as purely decorative (`aria-hidden="true"`). Use when the icon adds no information beyond adjacent text.
label	string \| null	null	Accessible label for meaningful icons. Sets `role="img"` and `aria-label`. Ignored when `decorative` is true.