Standard Toolbar Icons Cheat Sheet: Names, Sizes, and Usage Rules

What “Standard Toolbar Icons” are

Standard toolbar icons are a set of small, commonly used pictograms placed in application toolbars to represent frequent actions (save, open, print, undo, redo, copy, paste, search, etc.). They provide quick access to commands, reduce textual clutter, and help users recognize functionality across different programs.

Key characteristics

• Size & grid: Typically designed to fit common toolbar heights (16×16, 24×24, 32×32 px) and aligned to a consistent pixel/grid system.
• Simplicity: Minimal details so icons remain legible at small sizes.
• Metaphors: Use familiar visual metaphors (floppy disk for save, magnifying glass for search).
• Consistency: Uniform stroke weight, corner radii, and visual weight across the set.
• States: Include visual states for normal, hover, active/pressed, disabled.
• Formats: Provided as raster (PNG) and vector (SVG) for scalability and high-DPI support.
• Accessibility: Sufficient contrast, clear shapes, and meaningful alt text/ARIA labels for screen readers.

Design best practices

1. Limit detail: Avoid small strokes or text inside icons.
2. Use a consistent grid and stroke: Maintain visual unity across icons.
3. Test at target sizes: Verify clarity at the smallest supported size.
4. Provide clear states: Show hover and disabled variations so users understand interactivity.
5. Prefer universal metaphors: Use icons users recognize internationally; add labels when ambiguity is possible.
6. Support theming: Ensure icons work on light/dark backgrounds (inverted or outline variants).
7. Optimize file formats: Ship SVG for vector use and 2×/3× PNGs for legacy raster needs.

Common set (examples)

• New / Create
• Open
• Save
• Print
• Cut / Copy / Paste
• Undo / Redo
• Find / Search
• Refresh / Reload
• Settings / Preferences
• Help

When to use labels

Add text labels alongside icons when an action is uncommon, ambiguous, or critical (to reduce user error). For dense toolbars where space allows, reveal labels on hover or in expanded mode.

Short checklist for implementation

• Choose sizes (e.g., 16, 24, 32 px) and grid.
• Create SVGs with consistent stroke/geometry.
• Export raster fallbacks at 1×/2×/3×.
• Define CSS classes for states and theming.
• Add ARIA labels and test with assistive tech.

If you want, I can generate a sample 16×16 SVG set for common toolbar actions or a downloadable icon manifest.