SVG to SwiftUI

Star on GitHub

How to Use Bootstrap Icons in SwiftUI & iOS

Bootstrap Icons is the official open-source icon library from the Bootstrap team, with a broad set of figures designed to pair with any project. This guide shows you how to use Bootstrap 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 Bootstrap Icons icon onto an iPhone, iPad, or Mac screen is to convert it into a native SwiftUI Shape.

Open the converter with Bootstrap Icons icons → (2,754 icons, MIT License, from icons.getbootstrap.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 Bootstrap 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 Bootstrap Icons icon to SwiftUI in 4 steps

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

Starting from the original Bootstrap Icons star SVG source:

<svg fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z" />
</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.179*width, y: 0.928*height))
        path.addLine(to: CGPoint(x: 0.231*width, y: 0.633*height))
        path.addLine(to: CGPoint(x: 0.011*width, y: 0.423*height))
        path.addCurve(to: CGPoint(x: 0.029*width, y: 0.363*height), control1: CGPoint(x: -0.01*width, y: 0.403*height), control2: CGPoint(x: 0.001*width, y: 0.367*height))
        path.addLine(to: CGPoint(x: 0.335*width, y: 0.32*height))
        path.addLine(to: CGPoint(x: 0.471*width, y: 0.05*height))
        path.addCurve(to: CGPoint(x: 0.5*width, y: 0.031*height), control1: CGPoint(x: 0.476*width, y: 0.038*height), control2: CGPoint(x: 0.488*width, y: 0.031*height))
        path.addCurve(to: CGPoint(x: 0.529*width, y: 0.05*height), control1: CGPoint(x: 0.512*width, y: 0.031*height), control2: CGPoint(x: 0.524*width, y: 0.038*height))
        path.addLine(to: CGPoint(x: 0.666*width, y: 0.32*height))
        path.addLine(to: CGPoint(x: 0.972*width, y: 0.363*height))
        path.addCurve(to: CGPoint(x: 0.989*width, y: 0.423*height), control1: CGPoint(x: 0.999*width, y: 0.367*height), control2: CGPoint(x: 1.01*width, y: 0.403*height))
        path.addLine(to: CGPoint(x: 0.769*width, y: 0.633*height))
        path.addLine(to: CGPoint(x: 0.821*width, y: 0.928*height))
        path.addCurve(to: CGPoint(x: 0.774*width, y: 0.965*height), control1: CGPoint(x: 0.826*width, y: 0.956*height), control2: CGPoint(x: 0.799*width, y: 0.978*height))
        path.addLine(to: CGPoint(x: 0.5*width, y: 0.824*height))
        path.addLine(to: CGPoint(x: 0.226*width, y: 0.965*height))
        path.addCurve(to: CGPoint(x: 0.179*width, y: 0.928*height), control1: CGPoint(x: 0.202*width, y: 0.978*height), control2: CGPoint(x: 0.174*width, y: 0.956*height))
        path.closeSubpath()
        path.move(to: CGPoint(x: 0.486*width, y: 0.755*height))
        path.addCurve(to: CGPoint(x: 0.514*width, y: 0.755*height), control1: CGPoint(x: 0.495*width, y: 0.75*height), control2: CGPoint(x: 0.505*width, y: 0.75*height))
        path.addLine(to: CGPoint(x: 0.745*width, y: 0.874*height))
        path.addLine(to: CGPoint(x: 0.701*width, y: 0.626*height))
        path.addCurve(to: CGPoint(x: 0.712*width, y: 0.595*height), control1: CGPoint(x: 0.699*width, y: 0.615*height), control2: CGPoint(x: 0.703*width, y: 0.603*height))
        path.addLine(to: CGPoint(x: 0.893*width, y: 0.422*height))
        path.addLine(to: CGPoint(x: 0.64*width, y: 0.386*height))
        path.addCurve(to: CGPoint(x: 0.615*width, y: 0.368*height), control1: CGPoint(x: 0.629*width, y: 0.384*height), control2: CGPoint(x: 0.62*width, y: 0.377*height))
        path.addLine(to: CGPoint(x: 0.5*width, y: 0.139*height))
        path.addLine(to: CGPoint(x: 0.385*width, y: 0.368*height))
        path.addCurve(to: CGPoint(x: 0.36*width, y: 0.386*height), control1: CGPoint(x: 0.38*width, y: 0.377*height), control2: CGPoint(x: 0.371*width, y: 0.384*height))
        path.addLine(to: CGPoint(x: 0.107*width, y: 0.422*height))
        path.addLine(to: CGPoint(x: 0.289*width, y: 0.595*height))
        path.addCurve(to: CGPoint(x: 0.299*width, y: 0.626*height), control1: CGPoint(x: 0.297*width, y: 0.603*height), control2: CGPoint(x: 0.301*width, y: 0.615*height))
        path.addLine(to: CGPoint(x: 0.255*width, y: 0.874*height))
        path.addLine(to: CGPoint(x: 0.486*width, y: 0.755*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 Bootstrap Icons free to use in iOS apps?

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

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

Open the Bootstrap 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.