react-brainSVG, vector graphics & icons (React Native)
draftedconfidence: mediumthis tier holds 50% on the public scorecard (3/19 graded · 0 overturned) →
recommendation
React Native → react-native-svg is the default for declarative vector graphics; import static .svg assets via react-native-svg-transformer, and pull icons from an icon set (lucide-react-native, or per-family @react-native-vector-icons/* — on Expo too, since @expo/vector-icons is deprecated in SDK 56). Drop to @shopify/react-native-skia only for GPU-accelerated / animated / custom canvas drawing beyond declarative SVG. Web → native <svg>, no library.
- declarative vector shapes → react-native-svg
- import designer .svg files as components → react-native-svg-transformer
- GPU / animated / custom drawing (charts, generative visuals) → react-native-skia (see RB-E-ANIMATION / RB-E-CHARTS)
- icons → lucide-react-native or per-family @react-native-vector-icons/* (avoid the legacy monolithic react-native-vector-icons for new work; a codemod exists — and @expo/vector-icons is deprecated in SDK 56, same migration)
- web → native <svg>; reuse the same icon set as React components
Options & tradeoffs
| option | tradeoff | evidence |
|---|---|---|
| react-native-svg (Software Mansion) | the de-facto RN SVG primitive (v15.x, RN 0.78+); declarative <Svg>/<Path>; underpins most RN charts + icon libs; iOS/Android/macOS/Windows + RN-Web | 4.5M/wk · ships in 14/34 |
| react-native-svg-transformer (kristerkari) | Metro transformer to import designer .svg files directly as React components; pairs with react-native-svg | 970k/wk · ships in 4/34 |
| @shopify/react-native-skia | GPU canvas — renders SVG (ImageSVG / Skia.SVG.MakeFromString, with limits: no CSS / <text> / <animate>) and does animated/custom vector drawing beyond declarative SVG; see RB-E-ANIMATION | |
| Redraw (William Candillon) — EXPERIMENTAL | next-gen 2D graphics on WebGPU/TypeGPU: variable-stroke Bézier paths, vector feathering, physically-based 2D; shaders authored as typed TS functions. Technical preview — not on npm (subscriber early access), unstable API. Watch, not a production bet | |
| icon sets — lucide-react-native / @react-native-vector-icons/* | lucide-react-native = Lucide (peer-deps react-native-svg); @react-native-vector-icons/* = per-family scoped sets; @expo/vector-icons is DEPRECATED in Expo SDK 56 — the wrapper became unnecessary, use the scoped packages directly | ships in 4/34 |
| react-native-vector-icons (legacy) | the monolith is SUPERSEDED → split into per-family @react-native-vector-icons/* (v11+); a codemod migrates from it and from @expo/vector-icons | ships in 4/34 |
| web: native <svg> | no library needed on React DOM; icon sets (Lucide etc.) ship as plain React components |
Migration lines
react-native-vector-icons → per-family @react-native-vector-icons/* packages (official codemod)
the monolith is superseded by scoped per-family packages (v11+); the maintainer ships a codemod covering both this and @expo/vector-icons
@expo/vector-icons → per-family @react-native-vector-icons/* packages (same codemod)
deprecated in Expo SDK 56 — upstream work made the wrapper unnecessary; use the scoped packages directly
npm weekly downloads (from the corpus's last signals run): react-native-svg-transformer 970k · react-native-svg 4.5M · react-native-vector-icons 517k · lucide-react-native 1.5M · @expo/vector-icons 5.8M
Verified notes
react-native-svg (Software Mansion, v15.x, RN 0.78+) is the de-facto RN SVG primitive — it underpins most RN charts (Victory Native) and icon libraries (lucide-react-native peer-depends on it). Skia renders SVG too but with limits (no CSS / <text> / <animate>); use it for GPU/custom drawing, not as the default SVG renderer. ICON-LIB SHIFT: the monolithic react-native-vector-icons is superseded by scoped @react-native-vector-icons/* packages (v11+, with a codemod). Added 2026-06-25 after the evidence-loop corpus self-audit flagged react-native-svg (used in ourpot + bitbarter) with no entry to map it to. Verified vs npm + the maintainers' repos. UPDATE 2026-07-09: Expo SDK 56 DEPRECATES @expo/vector-icons — "it will be replaced by @react-native-vector-icons/*" because "recent upstream work has made that wrapper unnecessary" (verified vs the SDK 56 changelog). The icon-lib consolidation onto the scoped packages is now complete on both bare RN and Expo.
Canonical reading
Editorial annotations on why each piece matters — the articles themselves are the originals; read them there.
Introduces Redraw — 2D primitives on WebGPU where shaders are TypeScript functions that receive geometry (tangent, arc length) to compute stroke width / feathering / material per-point, enabling physically-based 2D rendering. The Skia author's bet on WebGPU as the unified graphics runtime; experimental, but the direction RN GPU graphics is heading.
Practical deep-dive on inline SVG, importing .svg as components via react-native-svg-transformer, SvgUri/SvgXml, and animating SVGs — the canonical how-to for the react-native-svg workflow.
Sources
- registry.npmjs.org/react-native-svg/latest
- github.com/oblador/react-native-vector-icons/…
- expo.dev/changelog/sdk-56
Depth (in-domain rules) is owned by the react-native-best-practices skill — this entry is selection breadth.
Related in ui: styling · component-libs · animation · lists · a11y · i18n · charts · editors · maps · calendars · polish