Skip to content
Count Badges preview
Rendered from the SwiftUI source on this page.

Count Badges

From syxUI — written for both platforms, not translated between them.

Icons with count badges.

Badges · SwiftUI · iOS 17

  • badges
  • swiftui

The actual source

CountBadges.swift
// Count Badges · syxUI · https://syxui.dev/components/tag-count
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let tgRed = Color(red: 0.90, green: 0.24, blue: 0.28)

// Icon count badges
struct CountBadges: View {
    var body: some View {
        HStack(spacing: 30) {
            ForEach(Array([("bell.fill", "3"), ("message.fill", "12"), ("envelope.fill", "99+")].enumerated()), id: \.offset) { _, b in
                Image(systemName: b.0).font(.system(size: 24)).foregroundStyle(.primary).overlay(alignment: .topTrailing) {
                    Text(b.1).font(.system(size: 10, weight: .bold)).foregroundStyle(.white).padding(.horizontal, 5).padding(.vertical, 2).frame(minWidth: 18).background(tgRed, in: Capsule()).offset(x: 12, y: -8)
                }
            }
        }
    }
}
iOS 17 · No dependencies

Dependencies

SwiftUI
No external dependencies

Requires iOS 17