SVG to SwiftUI

Star on GitHub

How to Use Heroicons 2 in SwiftUI & iOS

Heroicons is a popular set of hand-crafted SVG icons by the makers of Tailwind CSS, available in outline and solid styles. This guide shows you how to use Heroicons 2 icons in your SwiftUI and iOS apps. SwiftUI can't render SVG or icon-font files directly, so the cleanest way to get a Heroicons 2 icon onto an iPhone, iPad, or Mac screen is to convert it into a native SwiftUI Shape.

Open the converter with Heroicons 2 icons → (972 icons, MIT License, from heroicons.com).

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 Heroicons 2. 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 Heroicons 2 icon to SwiftUI in 4 steps

  1. Open the Heroicons 2 examples. Launch the converter with Heroicons 2 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 Heroicons 2 “star” icon in SwiftUI

Starting from the original Heroicons 2 star SVG source:

<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
</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.45*width, y: 0.134*height))
        path.addCurve(to: CGPoint(x: 0.55*width, y: 0.134*height), control1: CGPoint(x: 0.468*width, y: 0.089*height), control2: CGPoint(x: 0.532*width, y: 0.089*height))
        path.addLine(to: CGPoint(x: 0.637*width, y: 0.342*height))
        path.addLine(to: CGPoint(x: 0.862*width, y: 0.36*height))
        path.addCurve(to: CGPoint(x: 0.894*width, y: 0.456*height), control1: CGPoint(x: 0.911*width, y: 0.364*height), control2: CGPoint(x: 0.931*width, y: 0.425*height))
        path.addLine(to: CGPoint(x: 0.722*width, y: 0.603*height))
        path.addLine(to: CGPoint(x: 0.774*width, y: 0.823*height))
        path.addCurve(to: CGPoint(x: 0.693*width, y: 0.882*height), control1: CGPoint(x: 0.786*width, y: 0.87*height), control2: CGPoint(x: 0.734*width, y: 0.908*height))
        path.addLine(to: CGPoint(x: 0.5*width, y: 0.765*height))
        path.addLine(to: CGPoint(x: 0.307*width, y: 0.882*height))
        path.addCurve(to: CGPoint(x: 0.226*width, y: 0.823*height), control1: CGPoint(x: 0.266*width, y: 0.908*height), control2: CGPoint(x: 0.214*width, y: 0.87*height))
        path.addLine(to: CGPoint(x: 0.278*width, y: 0.603*height))
        path.addLine(to: CGPoint(x: 0.106*width, y: 0.456*height))
        path.addCurve(to: CGPoint(x: 0.138*width, y: 0.36*height), control1: CGPoint(x: 0.069*width, y: 0.425*height), control2: CGPoint(x: 0.089*width, y: 0.364*height))
        path.addLine(to: CGPoint(x: 0.363*width, y: 0.342*height))
        path.addLine(to: CGPoint(x: 0.45*width, y: 0.134*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 Heroicons 2 free to use in iOS apps?

Heroicons 2 is distributed under the MIT License. Always check the official Heroicons 2 license for the exact terms before shipping.

Do I need a third-party package to use Heroicons 2 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 Heroicons 2 icon now

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