[Also submitted as FB20225387]
When using a custom SF Symbol that combines a base symbol with a badge, the symbol doesn’t stay vertically centered when displayed in code. The vertical alignment shifts based on the Y offset of the badge.
There are two problems with this:
- The base element shouldn’t move vertically when a badge is added—the badge is meant to add to the symbol, not change its alignment.
- The badge position should be consistent with system-provided badged symbols, where badges always appear in a predictable spot relative to the corner they're in (usually at X,Y offsets of 90% or 10%).
Neither of these behaviors match what’s expected, leading to inconsistent and misaligned symbols in the UI.
Screenshot of Problem
The ellipsis shifts vertically whenever the badge Y offset is set to anything other than 50%. Even at a 90/10 offset, it still doesn’t align with the badge position of the system "envelope.badge" symbol.
SF Symbols Export
This seem to be a SwiftUI issue since both the export from SF Symbols is correctly centered:
Xcode Assets Preview
And it's also correct in the Xcode Assets preview:
Steps to Repro
- In SF Symbols, create a custom symbol of "ellipsis" (right-click and Duplicate as Custom Symbol)
- Combine it with the "badge" component (select Custom Symbols, select the newly-created "custom.ellipsis", then right-click and Combine Symbol with Component…)
- Change the badge's Y Offset to 10%.
- Export the symbol and add it to your Xcode asset catalog.
- In Xcode, display the symbol inside a Button using
Image(“custom.ellipsis.badge”). - Add a couple more buttons separated by spacers, using system images of "ellipsis" and "app.badge".
- Compare the "custom.ellipsis.badge" button to the two system symbol buttons.
Expected
The combined symbol remains vertically centered, matching the alignment shown in both the SF Symbols export window and the Xcode asset catalog thumbnails.
Actual
The base symbol (e.g., the ellipsis portion) shifts vertically based on the Y offset of the badge element. This causes visual misalignment when displayed in SwiftUI toolbars or other layouts. Also included the system “envelope.badge” icon to show where a 90%, 10% badge offset should be located.
System Info
- SF Symbols Version 7.0 (114)
- Xcode Version 26.0 (17A321)
- macOS 15.6.1 (24G90)
- iOS 26.0 (23A340)