Flutter SVG Icons – flutter_svg, Material Symbols & Best Libraries

Flutter doesn’t render SVGs natively — you need the flutter_svg package. Here’s how to add SVG icons, use Material Symbols built into Flutter, and manage icon assets effectively.

Icon options for Flutter

HomeNotificationsSearchHomeBellSearchHouseBellMagnifying GlassHomeBellSearchHomeBellMagnify

Option 1: Material Icons (built-in, no package needed)

Flutter ships Material Icons out of the box — the fastest path for standard icons:

// No import needed — Icon is a core Flutter widget
Icon(Icons.home)
Icon(Icons.home, size: 24.0)
Icon(Icons.home, color: Colors.indigo)

// Outlined variant
Icon(Icons.home_outlined)

// Rounded variant
Icon(Icons.home_rounded)

Option 2: flutter_svg package

For custom SVG icons from Lucide, Feather, Phosphor, or your own brand:

Install

# pubspec.yaml
dependencies:
  flutter_svg: ^2.0.10

flutter pub get

Add SVG assets

Download SVGs from AllSVGIcons and place them in an assets folder:

my_app/
  assets/
    icons/
      home.svg
      search.svg
      settings.svg
  lib/
  pubspec.yaml

Register the folder in pubspec.yaml:

flutter:
  assets:
    - assets/icons/

Use SvgPicture.asset

import 'package:flutter_svg/flutter_svg.dart';

// Basic usage
SvgPicture.asset('assets/icons/home.svg')

// With size and color
SvgPicture.asset(
  'assets/icons/home.svg',
  width: 24,
  height: 24,
  colorFilter: const ColorFilter.mode(
    Colors.indigo,
    BlendMode.srcIn,
  ),
)

// In a button
IconButton(
  onPressed: () {},
  icon: SvgPicture.asset(
    'assets/icons/search.svg',
    width: 20,
    height: 20,
    colorFilter: ColorFilter.mode(
      Theme.of(context).colorScheme.onSurface,
      BlendMode.srcIn,
    ),
  ),
)

Option 3: Network SVG (Iconify CDN)

If you don’t want to bundle SVG files as assets:

// Load from Iconify CDN
SvgPicture.network(
  'https://api.iconify.design/lucide:home.svg',
  width: 24,
  height: 24,
)

SVG color in Flutter

Unlike web SVGs, currentColor doesn’t work in Flutter. You must set color explicitly via colorFilter:

// Correct: use ColorFilter.mode with BlendMode.srcIn
SvgPicture.asset(
  'assets/icons/star.svg',
  colorFilter: const ColorFilter.mode(Colors.amber, BlendMode.srcIn),
)

// Dynamically use theme color
SvgPicture.asset(
  'assets/icons/heart.svg',
  colorFilter: ColorFilter.mode(
    Theme.of(context).colorScheme.primary,
    BlendMode.srcIn,
  ),
)

Reusable icon widget

Create a wrapper widget so you can change behavior later without touching all usages:

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class AppIcon extends StatelessWidget {
  const AppIcon({
    super.key,
    required this.assetPath,
    this.size = 24.0,
    this.color,
  });

  final String assetPath;
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) {
    final iconColor = color ?? Theme.of(context).colorScheme.onSurface;
    return SvgPicture.asset(
      assetPath,
      width: size,
      height: size,
      colorFilter: ColorFilter.mode(iconColor, BlendMode.srcIn),
    );
  }
}

// Usage
AppIcon(assetPath: 'assets/icons/home.svg')
AppIcon(assetPath: 'assets/icons/home.svg', size: 32, color: Colors.indigo)

Preparing SVGs for Flutter

Before adding SVGs to a Flutter project, optimize them:

1. Remove width/height attributes from the root <svg> — Flutter uses the width/height params of SvgPicture instead
2. Flatten groups where possible — simpler SVGs render faster
3. Keep viewBox — required for correct rendering
4. Remove currentColor — Flutter ignores it. Use a solid fill or stroke, then override via colorFilter

Online: use AllSVGIcons’ built-in SVG optimizer, or svgo locally:

npx svgo --input icons/ --output icons-optimized/ --config '{"plugins":["removeViewBox"]}'

Frequently asked questions