sf symbol button


sf symbols were introduced a while back, but they keep becoming better and better.

you can adjust weight and size with ease with no need for various assets. not to mention it works great for watchos and macos as well.

/* For easy of copy/pastability, all code is in one big chunk.
Be a dear and refactor this out any way you see fit 🤘 */

/* Idealy, you would NOT be using pre-defined constants or first view at all, only the code below the refactor line.
I am leaving the initial view here just for easier usage example or possible extraction. Hope that works 👌 */

import SwiftUI

fileprivate let fontSize: CGFloat = 20
fileprivate let fontHorizontalPadding: CGFloat = 16
fileprivate let shadowRadius: CGFloat = 10
fileprivate var defaultRadius: CGFloat = 24

// browse symbols on or get the SFSymbols App
fileprivate let buttonIconString: String = "hand.tap.fill"

fileprivate let lightShadowColor = Color(.displayP3, red: 0.80, green: 0.80, blue: 1, opacity: 1.0)
fileprivate let darkShadowColor = Color(.displayP3, red: 0.1803, green: 0.0470, blue: 0.4627, opacity: 1.0)

fileprivate let purpleAccentColor = Color(.displayP3, red: 0.39, green: 0.1, blue: 0.9, opacity: 1.0)
fileprivate let purpleAccentColorDark = Color(.displayP3, red: 0.37, green: 0.08, blue: 0.7, opacity: 1.0)

/* This is a just a holder view for the button, as this is button style.
You would need to adapt this to your app in a similar fashion as in this example. 👇*/
struct SFSymbolButtonView: View {

Please please don't use the colors this way 😅 I am only adding it here so you can have a preview
for both light and dark views. You should create a new semantic color in the assets and use it that way 👌
@Environment(\.colorScheme) var colorScheme

var body: some View {

let shadowColor = colorScheme == .dark ? darkShadowColor : lightShadowColor

ZStack {
Button("SFSymbol button") {
print("button tapped")
.buttonStyle(SFSymbolButtonStyle(sfIconString: buttonIconString))
.shadow(color: shadowColor, radius: defaultRadius)
//------------------- REFACTOR ABOVE THIS LINE ---------------------------------------

struct SFSymbolButtonStyle: ButtonStyle {

let sfIconString: String

func makeBody(configuration: Self.Configuration) -> some View {
HStack {
Image(systemName: sfIconString)
.font(Font.system(size: fontSize, weight: .bold, design: .default))
.frame(maxWidth: .infinity)
.padding(.horizontal, fontHorizontalPadding)
.background(configuration.isPressed ? purpleAccentColorDark : purpleAccentColor)

Awesome Sauce!
Thank you for getting one of my views, hope you are happy with it 👌
Consider helping this train rollin 🚂 on my Patreon ->

If you have any suggestions for improvements,
feel free to reach me at