How to Use Material Design Icons in SwiftUI & iOS

Material Design Icons are Google's official system icons, designed to be clean, legible, and consistent across Android, the web, and beyond. This guide shows you how to use Material Design Icons icons in your SwiftUI and iOS apps. SwiftUI can't render SVG or icon-font files directly, so the cleanest way to get a Material Design Icons icon onto an iPhone, iPad, or Mac screen is to convert it into a native SwiftUI Shape.

Open the converter with Material Design Icons icons → (4,341 icons, Apache License 2.0, from fonts.google.com/icons).

Why you can't drop an SVG icon straight into SwiftUI

SwiftUI's Image view supports PNG, JPEG, PDF, and SF Symbols — but not raw SVG files or icon fonts like Material Design Icons. Converting the icon to a SwiftUI Shape gives you a resolution-independent vector that scales perfectly at any size and can be filled, stroked, and animated like any other SwiftUI view.

Add a Material Design Icons icon to SwiftUI in 4 steps

1. Open the Material Design Icons examples. Launch the converter with Material Design Icons pre-selected in the Examples browser.
2. Pick your icon. Search the grid and click the icon you want — its SVG loads into the editor.
3. Convert to SwiftUI. Press Convert & Copy to generate a native SwiftUI Shape.
4. Paste into Xcode. Drop the Swift struct into your iOS project and use it like any other view.

Example: the Material Design Icons “star” icon in SwiftUI

Starting from the original Material Design Icons star SVG source:

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" d="M0 0h24v24H0z" />
  <path fill="none" d="M0 0h24v24H0z" />
  <path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
</svg>

the converter produces this native SwiftUI Shape:

struct StarShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let width = rect.size.width
        let height = rect.size.height
        path.move(to: CGPoint(x: 0.243*width, y: 0.875*height))
        path.addLine(to: CGPoint(x: 0.311*width, y: 0.582*height))
        path.addLine(to: CGPoint(x: 0.083*width, y: 0.385*height))
        path.addLine(to: CGPoint(x: 0.383*width, y: 0.36*height))
        path.addLine(to: CGPoint(x: 0.5*width, y: 0.083*height))
        path.addLine(to: CGPoint(x: 0.617*width, y: 0.36*height))
        path.addLine(to: CGPoint(x: 0.917*width, y: 0.385*height))
        path.addLine(to: CGPoint(x: 0.689*width, y: 0.582*height))
        path.addLine(to: CGPoint(x: 0.757*width, y: 0.875*height))
        path.addLine(to: CGPoint(x: 0.5*width, y: 0.72*height))
        path.closeSubpath()
        return path
    }
}

Then use it anywhere in your SwiftUI layout:

StarShape()
    .fill(Color.accentColor)
    .frame(width: 100, height: 100)

Frequently asked questions

Is Material Design Icons free to use in iOS apps?

Material Design Icons is distributed under the Apache License 2.0. Always check the official Material Design Icons license for the exact terms before shipping.

Do I need a third-party package to use Material Design Icons in SwiftUI?

No. Converting the icon to a SwiftUI Shape produces plain SwiftUI code with no dependencies — paste it straight into your project.

Convert your Material Design Icons icon now

Open the Material Design Icons icon browser, pick an icon, and copy the SwiftUI code. For more detail on how the conversion works, read the SVG to SwiftUI guide.