Interface controls

Building a clear interface vocabulary

Interface icons cover common actions such as search, settings, close, favorite, and account access. Consistency is more important than novelty in these controls. If the same action appears in several places, reuse a recognizable symbol and label rather than selecting a different decorative interpretation for each screen.

Decide whether the icon supports text or replaces it. A search symbol beside a visible Search label can be decorative. The same symbol on its own needs an accessible name on the button. Keep interaction behavior on semantic buttons and links, not on an SVG element with a click handler and no keyboard support. Test tab order and focus visibility alongside the visual design.

Stateful controls need more than a change of color. A saved favorite should communicate its selected state, and an unavailable action should be distinguishable from a temporary loading operation. Use appropriate text or state information to support the artwork. Avoid making every inactive icon faint if doing so makes its purpose difficult to recognize.

Choose a reference size and stroke weight for the interface family. Review dense symbols such as settings alongside simple shapes such as close and plus. Small optical adjustments can help them feel balanced, but keep a common outer box so layout remains predictable. In SVGPulse, compare the customized result at the dimensions used by your product, then test it with real labels, error messages, and both light and dark surfaces.

Try the proposed icons in a settings row with a realistic account name, a long preference label, and an error message. A gear beside the page heading can describe the section, while a gear inside a row can imply a separate action. Give each a clear purpose. Check a row with an unavailable action as well as the default row. A person should be able to find the control and understand why it is unavailable.

Prepare a useful export

Choose a sample above to open the editor. Review its size, color, and stroke against the background where it will be used. Keep an editable SVG when your destination supports vectors, or export a PNG at an appropriate resolution. Check the result in the real layout and retain applicable source notices with your project.

Explore the icon guides for examples and troubleshooting, or return to all collections to compare related symbols.