Autumn Sale50% offCOMPOT
Icons & BadgesPro ComponentiOS 16.0+Xcode 15+

Icon with Gradient Background

SF Symbol on top of a smooth linear gradient background.

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
labelIconWBackgroundGradient.swift
import SwiftUI

struct LabelIconWBackgroundGradient: View {
    
    let symbol: String
    let fgColor: Color
    let bgColor: Color
    
    var body: some View {
        Image(systemName: symbol)
            .font(.system(size: 14))
            .foregroundStyle(fgColor)
            .frame(width: 28, height: 28)
            .background(bgColor.gradient, in: RoundedRectangle(cornerRadius: 7, style: .continuous))
    }
}

#Preview {
    LabelIconWBackgroundGradient(symbol: "wifi", fgColor: .white, bgColor: .blue)
}

Ready to copy and paste directly into any Xcode project running iOS 16.0+.

Recommended Use Cases

  • First-run onboarding flows and feature introductions
  • App settings, preferences, and account configuration screens

Component Details

iOS Compatibility
iOS 16.0+
Xcode Version
Xcode 15+
Platform
iOS
License Tier
Pro
Themes & Contexts
settingsonboardingaccount
C

Compot for iOS

Native SwiftUI playground app

Preview all 130+ components interactively on your device and copy code straight to Xcode with 1 tap.

Get Compot on the App Store