Icon button alignment

When a leading icon comes and goes, padding should compensate so the label stays on the same vertical rhythm — not jump sideways.

Controls

Start icon

Padding left

Show guides

Shared inset boundaries make a toolbar feel intentional. Draw (or imagine) guide lines at the outer edge and at the content padding. Every control — with or without a start icon — should hug those same lines.

A common mistake is keeping fixed horizontal padding when an icon is removed. The label drifts left and the optical edge of the control breaks. Prefer a compact leading padding when the icon is present, and restore full padding when it is not.

Toggle the controls in the demo. Watch how the orange guides stay fixed while the button’s internal padding absorbs the icon.