SVG to SwiftUI

Star on GitHub

How to Use Font Awesome 6 Icons in SwiftUI & iOS

Font Awesome is one of the most widely used icon toolkits on the web, shipping thousands of solid, regular, and brand icons in a single consistent style. This guide shows you how to use Font Awesome 6 icons in your SwiftUI and iOS apps. SwiftUI can't render SVG or icon-font files directly, so the cleanest way to get a Font Awesome 6 icon onto an iPhone, iPad, or Mac screen is to convert it into a native SwiftUI Shape.

Open the converter with Font Awesome 6 icons → (2,058 icons, Free icons under CC BY 4.0, from fontawesome.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 Font Awesome 6. 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 Font Awesome 6 icon to SwiftUI in 4 steps

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

Starting from the original Font Awesome 6 star SVG source:

<svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
  <path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
</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.55*width, y: 0.035*height))
        path.addLine(to: CGPoint(x: 0.662*width, y: 0.294*height))
        path.addLine(to: CGPoint(x: 0.911*width, y: 0.335*height))
        path.addCurve(to: CGPoint(x: 0.956*width, y: 0.377*height), control1: CGPoint(x: 0.932*width, y: 0.338*height), control2: CGPoint(x: 0.949*width, y: 0.355*height))
        path.addCurve(to: CGPoint(x: 0.942*width, y: 0.441*height), control1: CGPoint(x: 0.963*width, y: 0.4*height), control2: CGPoint(x: 0.957*width, y: 0.425*height))
        path.addLine(to: CGPoint(x: 0.761*width, y: 0.643*height))
        path.addLine(to: CGPoint(x: 0.804*width, y: 0.927*height))
        path.addCurve(to: CGPoint(x: 0.782*width, y: 0.988*height), control1: CGPoint(x: 0.808*width, y: 0.951*height), control2: CGPoint(x: 0.799*width, y: 0.974*height))
        path.addCurve(to: CGPoint(x: 0.723*width, y: 0.993*height), control1: CGPoint(x: 0.765*width, y: 1.002*height), control2: CGPoint(x: 0.742*width, y: 1.004*height))
        path.addLine(to: CGPoint(x: 0.5*width, y: 0.859*height))
        path.addLine(to: CGPoint(x: 0.278*width, y: 0.993*height))
        path.addCurve(to: CGPoint(x: 0.219*width, y: 0.988*height), control1: CGPoint(x: 0.259*width, y: 1.004*height), control2: CGPoint(x: 0.236*width, y: 1.002*height))
        path.addCurve(to: CGPoint(x: 0.197*width, y: 0.927*height), control1: CGPoint(x: 0.202*width, y: 0.974*height), control2: CGPoint(x: 0.193*width, y: 0.951*height))
        path.addLine(to: CGPoint(x: 0.239*width, y: 0.643*height))
        path.addLine(to: CGPoint(x: 0.058*width, y: 0.441*height))
        path.addCurve(to: CGPoint(x: 0.045*width, y: 0.377*height), control1: CGPoint(x: 0.043*width, y: 0.425*height), control2: CGPoint(x: 0.038*width, y: 0.4*height))
        path.addCurve(to: CGPoint(x: 0.089*width, y: 0.335*height), control1: CGPoint(x: 0.051*width, y: 0.355*height), control2: CGPoint(x: 0.068*width, y: 0.338*height))
        path.addLine(to: CGPoint(x: 0.339*width, y: 0.294*height))
        path.addLine(to: CGPoint(x: 0.45*width, y: 0.035*height))
        path.addCurve(to: CGPoint(x: 0.5*width, y: 0), control1: CGPoint(x: 0.46*width, y: 0.014*height), control2: CGPoint(x: 0.479*width, y: 0))
        path.addCurve(to: CGPoint(x: 0.55*width, y: 0.035*height), control1: CGPoint(x: 0.522*width, y: 0), control2: CGPoint(x: 0.541*width, y: 0.014*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 Font Awesome 6 free to use in iOS apps?

Font Awesome 6 is distributed under the Free icons under CC BY 4.0. Always check the official Font Awesome 6 license for the exact terms before shipping.

Do I need a third-party package to use Font Awesome 6 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 Font Awesome 6 icon now

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