SF Symbols that look too big, too small, or misaligned next to text are usually a sizing-approach problem. Here is how to fix alignment, weight, and scale issues in SwiftUI.
A symbol that sits too high, too low, or looks mismatched next to text is one of the most common polish problems in iOS UI. The icon is rendering fine, it just looks wrong.
The root cause is usually that the symbol is being sized or weighted independently of the text it accompanies. SF Symbols are designed to behave like text glyphs, and fighting that design creates misalignment.
The fix is almost always to size symbols through the font system rather than fixed dimensions. When you do that, alignment tends to resolve itself.
This guide covers the specific cases and the durable fixes for each.
The classic mistake is sizing a symbol with `.frame(width:height:)`. This forces a box size but ignores the symbol's baseline relationship to text.
The result is an icon that does not line up with adjacent labels, because the frame and the text baseline are unrelated.
The fix is to size with the font instead.
Image(systemName: "star.fill")
.font(.body)
With a font-based size, the symbol aligns to the text baseline naturally. Reserve fixed frames for cases where you truly need a precise box, and even then prefer a font for the symbol itself.
If your label is semibold but your symbol is regular weight, the icon looks too light, and vice versa. The pairing reads as unbalanced.
Match the symbol weight to the text weight. Because symbols take weight from the font, this is straightforward.
HStack {
Image(systemName: "bolt.fill")
Text("Power")
}
.font(.headline)
Applying the font to the whole stack lets both the symbol and text share the same weight and size. That shared font is the simplest path to a balanced pairing.
When the icon still feels heavy or light, nudge the weight explicitly with `.font(.headline.weight(.semibold))`.
SF Symbols have an `imageScale` of small, medium, or large that adjusts how big the symbol reads relative to the text. The wrong scale makes an icon dominate or disappear.
If a symbol overpowers its label, drop the scale. If it looks lost, raise it.
Image(systemName: "magnifyingglass")
.imageScale(.medium)
Scale and font size are different levers. Font sets the base size, while scale fine-tunes the symbol's presence at that size.
Tune scale and weight together until the icon feels like a peer of the text, neither shouting nor whispering.
Sometimes a symbol sits slightly above or below the text baseline in a custom layout. This is common when you compose icon and text manually instead of using `Label`.
The most reliable fix is to use `Label`, which the system aligns correctly for you.
Label("Search", systemImage: "magnifyingglass")
If you must build the layout by hand, ensure both elements share the same font and consider an alignment that matches baselines rather than centers.
For stacks, experiment with the alignment parameter, such as `HStack(alignment: .firstTextBaseline)`, so the symbol and text agree on a baseline.
If you hard-code a point size, the symbol will not grow when the user increases their text size. It then looks tiny next to enlarged text, which is both an aesthetic and an accessibility failure.
Use semantic text styles so symbols scale with the user's settings.
Image(systemName: "gear")
.font(.title3)
Semantic styles like `.title3` or `.body` respond to Dynamic Type automatically. Your icons then keep pace with text at every accessibility size.
Test with the largest accessibility text sizes enabled. Misalignment and mismatched sizing become obvious at the extremes.
Different variants of a symbol can have different visual weights. A filled variant reads heavier than its outline counterpart at the same settings.
If an icon looks too bold or too delicate, try a different variant rather than only adjusting weight. Swapping `heart.fill` for `heart` can be the real fix.
The SF Symbols app lets you preview variants side by side so you can choose the one that balances best with your text.
Choosing the right variant up front often eliminates the need for fiddly weight and scale tweaks later.
Start by applying a semantic font to the symbol or, better, to the whole icon-and-text container. This gives correct size, weight, and Dynamic Type behavior in one move.
Use `Label` whenever you are pairing an icon with text, since it handles alignment for you. Reserve manual stacks for special cases.
Reach for `imageScale` to fine-tune presence, and choose an appropriate variant to balance visual weight. Avoid fixed frames for symbols unless absolutely necessary.
Follow this recipe and most alignment and sizing complaints disappear, because you are working with the symbol system instead of against it.
Verify your layout at the smallest and largest Dynamic Type sizes. Problems that hide at the default size often appear at the extremes.
Check both light and dark mode, since perceived weight can shift with contrast. Confirm the icon still feels balanced in each.
Review the symbol next to real content, not placeholder text. Real labels reveal alignment issues that dummy text can mask.
As with all SF Symbols work, this is purely visual. Building, signing, and submitting the app remain separate steps that happen in Xcode and through the Apple Developer Program.
Alignment can drift when the symbol and its label live in separate containers that do not share a font or baseline. Each container sizes independently, so they fall out of step.
The cleanest fix is to keep the icon and its text in the same stack and apply one font to that stack. Shared context produces shared metrics.
HStack(alignment: .firstTextBaseline) {
Image(systemName: "star.fill")
Text("Featured")
}
.font(.headline)
If the design forces them into separate views, pass the same font down explicitly so both agree on size and weight. Better still, reach for `Label`, which keeps the pairing together by design.
Sometimes you genuinely need a symbol to occupy a fixed slot, such as a leading icon column in a list where every row must line up. The goal is a consistent box without breaking baseline alignment.
Size the symbol with a font as usual, then give the container, not the symbol, a fixed width so all rows align.
HStack {
Image(systemName: "gear")
.font(.body)
.frame(width: 28, alignment: .center)
Text("Settings")
}
Applying the frame to wrap the symbol, rather than forcing the symbol's own dimensions, keeps the glyph at its natural font-driven size while still reserving a uniform column.
This pattern gives you tidy vertical alignment across rows without the misalignment that comes from sizing the symbol itself with a hard frame.
You are probably sizing it with a fixed frame. Size symbols with a font instead, or use Label, so they align to the text baseline automatically.
Apply the same font to both, ideally to the enclosing stack, for example .font(.headline). You can also set weight explicitly with .font(.headline.weight(.semibold)).
Font sets the symbol's base size, while imageScale (small, medium, large) fine-tunes how prominent the symbol reads at that size.
You likely hard-coded a point size. Use a semantic font like .font(.body) so the symbol scales with Dynamic Type.
Prefer Label for automatic alignment. For manual stacks, share the same font and try HStack(alignment: .firstTextBaseline) to align baselines.