Designing Icons for Bottom Tab Bars in iOS Apps That Users Actually Understand

Every iOS app that leans on returning visitors sits on one UI element: the bottom tab bar. It anchors the user's mental map. When the icons are well-crafted, navigation feels almost invisible. When they are inconsistent, the entire app starts to feel harder to use.

Mobile design is unforgiving. A user standing at Wynyard or grabbing a coffee at Bondi spares only a split-second before tapping. Strong tab bar iconography removes friction from a distracted moment.

Australian mobile usage punches above its weight, with active users treating local tools (Afterpay, CommBank, Qantas, myGov, Bunnings, Woolworths, ATO) as everyday utilities. Locals expect clarity, personality, and respect for the accessibility rules baked into Apple's Human Interface Guidelines.

The patterns below walk through how to design icons that hold up in Bondi sunlight and on a six-and-a-half inch display in a Perth office, covering Apple's conventions, tab bar quirks in code, and the file workflow linking Photoshop sources to the Xcode asset catalog.

The role of the tab bar in iOS navigation

The bottom tab bar sits along the lower edge of an iPhone screen, flattening an app's architecture into three to five top-level destinations. Tap "Account" in the CommBank app and the bar stays visible as you switch sections. That persistence is the whole point: users keep track of where they are without needing a back button.

iOS ships a system component called UITabBar to handle this layout, complete with selected and unselected states, animations, and accessibility hooks. Designers only draw the glyph inside each tab. Each icon needs to be identified correctly within roughly half a second of glancing down, which is a liberating constraint.

Avoid overloading the bar with more than five tabs. Apple breaks at the fifth slot and surfaces overflow under "More". For Australian releases shipping into the App Store, sticking to four tabs is the safest default, since the myGov and ATO apps keep counts deliberately low for older audiences.

Visual consistency across slots

Once the count is fixed, the challenge is making different concepts look like siblings. The standard iOS idiom is the outline-on-solid swap: a thin line-only glyph when inactive, a solid filled version when selected. SF Symbols treats this as a toggle, and custom artwork should follow the same logic so users can read the change at a glance.

Consistency goes deeper than fill state. A 1.5pt calendar line beside a 2.5pt profile icon will feel jittery. A square envelope and a circular avatar at identical dimensions will look wildly different, so nudge them until they feel balanced. Hard-edged shapes like a house outline should share the same corner radius as softer glyphs like a chat bubble.

Working in Photoshop keeps the geometry easier when each icon sits on a 24-by-24 grid with consistent padding inside a 28-by-28 safe area. Snap to whole pixels and centre optically rather than mathematically. The set then reads as a family whether the user is browsing the Bunnings workshop app or the Atlassian Companion.

Conveying meaning through shape

Iconography is shorthand that only works if it can survive translation. Australian users come from a wide mix of cultural and linguistic backgrounds, so globally familiar pictograms (home, search, gear, person, bell) are far safer than clever metaphors. A house icon reads correctly in Brisbane, Broome, and Box Hill; a map pin reads correctly in Sydney and Surfers Paradise; a shopping bag reads correctly anywhere.

Where concepts drift towards jargon, resist being cute. A "Wallet" tab might draw a literal wallet, but a card or dollar sign is more universal where contents are financial. Tab bars trade nuance for instant recognition, and the rest of the meaning happens in the label underneath, which stays non-optional on iOS for accessibility reasons.

User testing stays cheap. A hallway test with five colleagues, three of whom are not designers, exposes icons that look fine in the file but read as "snake" or "screwdriver" at 29 pixels. Australian teams often run these over a quick arvo coffee, which surfaces the worst offenders before commit.

Sizing, hit targets, and accessibility

Apple's Human Interface Guidelines say each tab bar item should occupy its tab's width and centre its glyph within a 25-by-25 to 28-by-28 point canvas inside a 49-point tall bar. The pixel count varies with device, so Xcode's asset catalog wants 1x, 2x, and 3x renders from the same source. Anything outside the safe area gets clipped, particularly on devices with home indicators.

Hit targets are quietly larger than the visible glyph, but accessibility adds constraints that are easy to forget. VoiceOver reads each tab's label aloud, so the artwork must pair with a meaningful string rather than stay generic. Dynamic Type pushes label text up on devices belonging to users with reduced vision, so icon-to-label spacing should breathe.

Australia's expectations are reinforced by state services such as Service NSW and the federal myGov app, both of which pass strict contrast and VoiceOver audits before each release. Designers pitching work to enterprise clients in Sydney or Melbourne can borrow from those audits as a baseline, especially in government-adjacent sectors where compliance is non-negotiable.

Exporting icons from Photoshop for production

The export pipeline matters because a beautifully drawn icon that arrives blurry on a Super Retina display defeats the effort. Photoshop's vector layer support makes the maths easier: each glyph lives on its own layer, grouped into a labelled PSD, with paths pulled from a master set like those in the PSD Icons catalogue. Export layers at 1x to transparent 24-by-24 PNGs, then run them through ImageOptim.

From Photoshop the workflow flows into Xcode's asset catalog. Drag the 1x, 2x, and 3x PNGs into the relevant image set, mark them as template rendering so iOS applies the dynamic tint, and the icon is ready to wire up against UITabBarItem. The PSD stays in the design system folder as the editable source of truth, ready for the next sprint to refresh when products like ATO or Qantas rebrand.

A tidy export checklist keeps releases calm: alphabetic file names, consistent naming pattern, all sizes per asset, locked master layers, and a shared library of strokes and corner radii. Teams based in Adelaide and Perth that ship across time zones appreciate the discipline.

Browse the PSD Icons store for vector tab bar packs built on a 24-pixel grid with matching filled and outline versions in transparent PNGs, free to download in starter packs across categories like social, finance, and travel.