Icons

Setup

Install react-native-svg alongside whichever icon sets you want, and provide the icons the same way you would on the web:

npm install @ng-native/icons @ng-icons/core @ng-icons/heroicons
npx expo install react-native-svg

import { Component } from '@angular/core';
import { NgIcon } from '@ng-native/icons';
import { provideIcons } from '@ng-icons/core';
import { heroBookOpen, heroAcademicCap } from '@ng-icons/heroicons/outline';

@Component({
  selector: 'app-root',
  imports: [NgIcon],
  providers: [provideIcons({ heroBookOpen, heroAcademicCap })],
  template: `<ng-icon name="heroBookOpen" [size]="28" color="#ff9f0a" />`,
})
export class App {}

provideIcons can be called at any level of the injector tree, and a provideIcons closer to a component wins over one further up - the same layering ng-icons has on the web. name accepts either spelling: the camel-cased key the icon was provided under (heroBookOpen) or the kebab-case form (hero-book-open); both resolve to the same icon.

If a name is not found under any provideIcons in scope, the icon renders nothing and, in a dev build, logs a console warning naming the missing icon. There is no fallback glyph, so a typo'd name fails visibly in development and silently in production - check the console the first time an icon does not show up.

Colour and stroke width

An icon set built for the web expresses two things in CSS: the currentColor a stroke or fill resolves against, and a stroke width carried as a custom property. Both become inputs here instead:

• color is set on the icon's host, and native paints every currentColor brush in the icon from it directly. Changing color recolours every stroke and fill without re-parsing or rebuilding the icon's shapes.
• strokeWidth fills in var(--ng-icon__stroke-width, 1.5), which is how the heroicons outline set (and others built the same way) carry their line weight.

<ng-icon name="heroBookOpen" [size]="20" color="#0a84ff" [strokeWidth]="2" />

Raw markup

Pass svg instead of name to render markup that did not come from provideIcons - fetched at runtime, or generated by your own code:

<ng-icon [svg]="mySvgString" [size]="24" />

The parser behind this is intentionally narrow: it recognises svg, g, path, circle, ellipse, rect, line, polyline and polygon, which between them cover every icon set ng-icons ships (heroicons, lucide, bootstrap-icons and the rest are built entirely from this tag surface). Anything outside it - <defs>, gradients, a <style> block, an embedded <text> - is silently skipped rather than rejected, so a hand-written SVG with those features will render an incomplete icon with no error. Stick to icons that are just paths and basic shapes.

Accessibility

An icon with no accessibilityLabel is treated as decorative: it is left out of the accessibility tree entirely, which is correct for an icon sitting next to a text label that already says what it means. Set accessibilityLabel when the icon is the only thing conveying meaning - an icon-only button, for example - and it becomes an accessibility element with accessibilityRole="image":

<ng-icon name="heroTrash" accessibilityLabel="Delete" />

Sizing

size is a single number: icons are square, drawn from their viewBox, and size sets both width and height in points. It defaults to 24, matching the box most icon sets are drawn for.

API