SVGPulseHow to choose icon sizes for buttons
An icon can be perfectly drawn and still make a button feel awkward. The usual problem is the relationship between the icon, label, padding, and clickable area. Start with the button's job and typography, then choose the icon size as part of that component rather than as an isolated decoration.
Start with the text
For a button with a 14–16 pixel label, try an icon around 16–20 pixels as an initial design choice. These are starting values, not accessibility rules. A dense symbol may need slightly more room than a simple arrow. Compare both at normal browser zoom. If the symbol dominates the word, reduce its visual weight or size. If the label looks disconnected from it, adjust the gap rather than repeatedly increasing the icon.
Separate artwork size from target size
The visible icon and the interactive target are different boxes. A small close symbol can sit inside a generously padded button. Do not make the clickable area equal to the path's tiny silhouette. Set dimensions and padding on the button itself, then center the SVG inside it. Test nearby controls on a phone: an attractive layout is not successful if a visitor repeatedly taps the neighboring action.
Use alignment that survives long labels
Use an inline flex layout with centered items and an explicit gap. Prevent the SVG from shrinking when the label wraps. Avoid aligning icons using a chain of negative margins, because translated labels and different fonts expose those assumptions. For a button that can wrap onto two lines, decide whether the icon should align with the first line or with the whole text block, then implement that decision consistently across the component library.
Choose leading or trailing placement deliberately
A leading shopping-bag icon identifies the action's category. A trailing arrow suggests movement to a next step. Both can work, but putting two decorative symbols around every label adds noise. Use a concise verb such as Continue or Download, then add a symbol only if it makes scanning easier. For right-to-left interfaces, review directional arrows separately from non-directional objects; a brand mark or clock should not be mirrored just because text direction changes.
Inspect the whole state set
Compare the button at rest, on hover, with keyboard focus, while disabled, and while loading. Keep the outer dimensions stable when swapping an arrow for a spinner so surrounding content does not jump. If the loading indicator replaces the only visible label, retain an accessible description of what is happening. Check the icon against every background used by the component, especially when the background changes on hover.
A repeatable SVGPulse workflow
Pick a simple arrow or action icon and begin with the same size and stroke as neighboring controls. Use the button preview to judge its relationship with a label. Export a version, place it in the actual component, and test a short and long label. The editor preview helps you explore quickly; the final decision belongs in the real layout with its actual font, spacing, and behavior. Save the approved measurements as component tokens.
Implementation example
.action { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1rem; }
.action svg { width: 1.125rem; height: 1.125rem; flex: none; }Build a small sizing experiment
Create three versions of a button using the same label, padding, and type style. Try an icon at 16, 18, and 20 CSS pixels, then compare the complete controls at normal zoom. These are experiment values, not universal rules. A compact toolbar and a large marketing call to action have different needs. Check where the symbol's visible artwork sits inside its canvas: two files with identical width and height can look different because one has more internal padding. Keep the label unchanged during this first comparison so that you can attribute the visual difference to the icon. Once you choose a starting size, try a longer label, a two-word translation, and a narrow viewport. The best setting is the one that keeps the action readable across those conditions without requiring individual fixes for every button.
Handle dense toolbars without shrinking every target
A toolbar can contain compact artwork and still leave enough room around each control. Treat the button box, the symbol, and the gap between buttons as separate measurements. Reducing all three together may save space but make the interface much harder to operate. In a row of edit, duplicate, download, and delete actions, consider showing fewer primary actions and moving infrequent ones into an accessible menu. Keep destructive actions distinguishable through labeling and placement instead of relying only on a red icon. Test the toolbar with keyboard focus visible; a neat row in a static mockup can become confusing when outlines overlap. If there is not enough space, change the layout or interaction before making every symbol tiny. A clear interface with fewer visible actions often works better than an uninterrupted strip of ambiguous marks.
Write a useful component specification
A handoff note should identify the icon dimensions, button padding, label style, icon-to-label gap, and state behavior. Include an example with the longest realistic label rather than only a short word such as Go. Explain whether the icon appears before or after the label and whether that placement changes for the languages your product supports. State how a loading state affects the layout: replacing the symbol with a spinner should not unexpectedly move the label or change the button width. Check that the disabled state remains legible while still looking unavailable. Finally, review the rendered component on a phone and a desktop instead of assuming that matching CSS numbers guarantees the same visual result. Save the specification alongside the component, so future buttons inherit the decision rather than introducing another slightly different icon size.
Continue reading: Creating a consistent icon set with stroke and spacing
Try it with an icon
Browse a collection, customize an icon in the studio, and review the result in your actual project.
Browse icon collections →