A Complete Guide to Standard Application Icons: Types, Uses, and Best Practices

Designing with Consistency: Creating Standard Application Icons for UX

Overview

Consistent application icons improve usability by helping users recognize actions, objects, and navigation quickly. This guide covers principles, practical workflow, and export considerations to build a cohesive, scalable icon set for user interfaces.

Principles

• Clarity: Icons must clearly represent a single concept; avoid combining multiple ideas.
• Consistency: Use uniform stroke weights, corner radii, visual metaphors, and level of detail across the set.
• Scalability: Design for legibility at small sizes (16–24 px) while supporting larger display scales (2x/3x).
• Simplicity: Favor minimal forms; reduce detail that won’t render at small sizes.
• Metaphor Familiarity: Reuse established metaphors (e.g., magnifying glass = search) unless creating a deliberate new pattern.
• Accessibility: Ensure sufficient contrast and include accessible labels or tooltips; avoid relying on icons alone for critical actions.

Visual System Specifications

• Grid & Alignment: Use a consistent pixel grid (e.g., 24 px artboard with 2 px padding) and align strokes to the grid.
• Stroke Weight: Choose a base stroke (e.g., 1.5–2 px at 24 px) and scale proportionally.
• Corner Radii: Apply consistent radii for rounded shapes (specify exact values).
• Optical Adjustments: Nudge optical centers, adjust stroke endings, and harmonize proportions for visual balance.
• Filled vs. Outline: Decide whether icons are filled, outline, or dual-tone and use one style per set or provide matched variants.

Workflow (Step-by-step)

1. Audit existing icons in the product to identify gaps and inconsistencies.
2. Define the system tokens: grid size, stroke weight, corner radius, padding, color tokens.
3. Create base templates: artboard sizes (16/24/32/48 px), alignment guides, and export slices.
4. Design core primitives: circles, rectangles, lines, arrowheads to reuse as building blocks.
5. Design core icons first: essential actions and objects (menu, back, close, search, settings).
6. Iterate with pixel checks: test at target sizes, refine strokes and spacing.
7. Create variants: active/disabled/focused states, and filled/outline matched styles.
8. Document usage rules and naming conventions in a style guide.
9. Export and package: SVG for web, PDF for vector distribution, PNGs at 1x/2x/3x, and icon font if needed.
10. Handoff & maintenance: provide source files, tokens, and versioning; plan periodic reviews.

File & Export Recommendations

• SVGs: Clean, semantic SVGs without unnecessary groups; use currentColor for flexible coloring.
• PNG exports: Provide 16/24/32/48 px at 1x and high-res 2x/3x.
• Icon fonts vs. SVG sprite: Prefer SVGs for accessibility and flexibility; icon fonts for legacy constraints.
• Naming: Use descriptive, kebab-case filenames and include size/token in exports (e.g., search-24.svg).

Testing & Accessibility

• Visual tests: Verify legibility at small sizes and across