App Bar Icons for Windows Phone 7: Essential Set for Developers

Top 25 App Bar Icons for Windows Phone 7 — Optimized Sizes & FormatsThe Windows Phone 7 platform introduced a unique UI idiom centered on simplicity and clarity, and the App Bar plays a key role in giving users quick access to primary actions. Designing or selecting the right app bar icons requires attention to the platform’s visual language, pixel-perfect sizing, and file formats that preserve crispness on various displays. This article lists 25 essential app bar icons tailored for Windows Phone 7, explains size and format best practices, and offers guidance on creating and exporting icons that feel native to the platform.

Why app bar icons matter on Windows Phone 7

App bar icons live at the bottom of the screen and must communicate actions quickly with minimal visual noise. They are typically monochrome, glyph-like, and sized for tap targets and legibility. Properly optimized icons improve perceived performance, accessibility, and the overall polish of an app.

Windows Phone 7 app bar icon basics

• App bar icons should be simple, flat, and single-color glyphs.
• Use a transparent PNG for the icon image; the OS applies the app bar background and tint.
• Keep strong contrast between glyph and background; the system may invert or tint icons depending on theme.
• Align icons on an invisible 32×32 or 48×48 logical grid depending on the target density; center glyphs within the grid and leave consistent internal padding.
• Avoid text on icons; pair them with a label beneath in the app bar when clarity is needed.

Pixel sizes, scaling, and export formats

Windows Phone 7 used primarily one logical resolution for app UI, but devices had different physical pixel densities. Follow these guidelines:

• Base logical icon size: 48×48 px canvas with a glyph drawn roughly within a centered 32×32 area. This yields crisp appearance when composited.
• Safe padding: leave at least 8 px transparent padding on all sides (within the 48×48 canvas) so glyphs don’t feel cramped.
• Export formats: PNG-24 with full transparency is the preferred format. Avoid PNG-8 dithering for glyphs to prevent jaggies.
• Anti-aliasing: use crisp, controlled anti-aliasing. For pure glyphs, consider 1-pixel stroke widths and hinting to preserve sharpness.
• Color: supply icons as white (or single color) on transparent background; let OS apply tints. If you need colored icons, ensure they remain legible at small sizes.

Note: For modern tooling and higher-DPI devices, also export @2x (96×96) and @3x (144×144) PNGs following the same centered-glyph approach.

Design principles for the icon set

• Visual consistency: unified stroke widths, corner radii, and optical weighting.
• Semantic clarity: each glyph must map clearly to its action (e.g., a gear for settings).
• Minimalism: remove unnecessary detail; prefer recognizable silhouettes.
• Accessibility: pair icons with text labels where meaning might be ambiguous.
• Scalability: test on low-contrast backgrounds and different theme colors.

Top 25 App Bar Icons (names, recommended glyph descriptions, and usage)

Below are 25 icons commonly useful for Windows Phone 7 apps, with short notes on their visual style and typical use cases.

1. Back / Up — Left-pointing chevron or arrow; navigate to previous screen.
2. Home — House silhouette; return to app’s main page.
3. Search — Magnifying glass; open search UI.
4. Add / New — Plus sign; create new item.
5. Edit — Pencil; enter edit mode.
6. Delete / Remove — Trash can; remove selected item.
7. Save — Floppy disk or check-mark in a box; save changes.
8. Refresh / Reload — Circular arrow; refresh content.
9. Settings — Gear; open settings or preferences.
10. Share — Outgoing arrow or connected nodes; share content.
11. Favorite / Star — Star shape; mark item as favorite.
12. Like / Thumbs Up — Thumb-up glyph; express approval.
13. Warning / Alert — Exclamation mark in triangle; show alerts.
14. Info — Lowercase “i” in circle; display informational details.
15. Camera / Capture — Camera silhouette; take a photo.
16. Attach / Paperclip — Paperclip; attach files or media.
17. Play — Right-pointing triangle; play media.
18. Pause — Two vertical bars; pause media.
19. Stop — Square; stop playback or process.
20. Next / Forward — Right-pointing chevron; move to next item.
21. Previous — Left-pointing chevron with bar; go to previous track/page.
22. Map / Location — Map marker; show location or map.
23. Upload / Cloud Upload — Up arrow to cloud; upload content.
24. Download / Cloud Download — Down arrow to cloud; download content.
25. Menu / More — Ellipsis (…) or hamburger; open extended actions.

Example visual rules for drawing glyphs

• Stroke weight: aim for visually consistent strokes equivalent to ~2–3 px at the base 48×48 canvas.
• Corner radii: use small radii for rounded shapes to match system controls.
• Optical centering: nudge curved shapes slightly down to appear visually centered.
• Alignment: anchor glyphs to pixel grid where possible to keep edges sharp.

Export checklist (practical steps)

1. Create each glyph on a 48×48 px artboard with transparent background.
2. Draw the glyph centered within a 32×32 px safe area.
3. Use a single-color fill (white) and consistent stroke/no stroke rule per set.
4. Turn on pixel snapping; review at 100% zoom to check anti-aliasing.
5. Export PNG-24 with transparency at 1x, 2x, and 3x sizes (48, 96, 144 px). Name files using clear suffixes (e.g., icon-add.png, [email protected]).
6. Test in the app on device/emulator with both light and dark themes.

Sample naming convention

• icon-add.png (48×48)
• [email protected] (96×96)
• [email protected] (144×144)

This keeps asset management predictable and helps build the correct asset pipeline when integrating into projects.

Tips for integrating into XAML projects

• Use Image controls inside AppBarButton templates or set the AppBarIconSource to your PNG.
• For performance, keep PNGs optimized but uncompressed by tools that might remove alpha edges. Test visually after optimization.
• For touch targets, ensure tappable area follows platform guidelines even if the glyph itself is smaller.

Where to get icons and licensing notes

• Use system-provided icons where possible for consistency.
• For third-party icon packs, confirm licensing (prefer SIL, MIT, or public domain for redistribution).
• If using vector sources (SVG), export at the target pixel sizes with controlled rasterization for best results.

Final thoughts

A thoughtful set of app bar icons—consistent in weight, spacing, and semantics—lifts an app’s UX on Windows Phone 7. Following the sizing, export, and naming conventions above ensures icons look crisp, behave predictably under theme tinting, and remain easy to maintain. With the 25 glyphs listed you’ll cover most common app actions while keeping the visual language aligned with platform expectations.