APP Icons
App icons are a tiny but powerful part of the interface: they must communicate a single idea instantly, sit harmoniously with type and layout, and remain legible at every size. For APPEX NOW’s web products I designed a single, cohesive icon system that prioritizes clarity, optical balance, accessibility, and ease-of-use for designers.
Anatomy & Fundamentals
Each icon is built from simple geometric shapes, a defined grid, consistent stroke weight, and clear visual balance. These core elements ensure scalability, legibility, and harmony across the entire icon set.
Artboard & Live Area:
Design on a 24×24 px artboard with a 20×20 px live area. Preserve even padding so icons optically align with type and other UI elements.
Stroke System:
Use a single stroke language across the set. Baseline: 2 px stroke at 24 px; scale proportionally for smaller sizes.
Corner Radius & Terminals:
Apply consistent corner radius and terminal styles to unify the family.
Fill vs Outline:
Use outline icons for neutral UI elements and filled icons sparingly for emphasis (active/selected).
Scale Targets:
Ensure recognizability at 16 px, canonical export sizes: 16 / 20 / 24 / 32 / 40 / 48 px.
Best Practices
The App Icon best practices are a compact rule set that keeps our icons simple, consistent, and accessible.
They emphasize clear metaphors, a single grid & stroke language, small optical adjustments for visual balance, vector-first files, and redundant (non-color) cues so icons read reliably at every size and in every context.
Create a recognizable, highly simplified design
Keep icons minimal and concept-driven. Too many decorative details make glyphs unreadable at small sizes. Aim for a single, universal idea per icon. Prefer familiar metaphors that directly map to the action or content they represent.
Maintain visual consistency across the set
All icons must share a consistent size, level of detail, stroke weight, and perspective. When two icons feel visually imbalanced (for example, one looks lighter), adjust dimensions so they sit together harmoniously.
Use the same stroke weight as adjacent text (where appropriate)
Match icon weight to nearby type to keep visual emphasis balanced. If an icon sits next to label text, it should neither overwhelm nor disappear. Adjust size or stroke to match the label’s perceived weight.
Optical centering & padding
Geometric centering can make asymmetric icons look off. Apply tiny optical nudges and include those pixels as padding in the exported asset so the file is geometrically centered but optically balanced.
Provide selected-state versions only when necessary
You don’t need separate selected/unselected icons for standard system components where a framework will apply selected appearance. Supply a selected (filled/tinted) variant only for components that explicitly require it.
Design inclusive, culture-aware icons
Prefer gender-neutral human figures, avoid culturally ambiguous metaphors when possible, and test icons with target markets. If icons include text or characters, provide localized variants and RTL flips.
Use vectors (SVG) for custom icons
Vector formats scale cleanly for high-DPI screens and can be theme-able. PNGs are acceptable only when you need raster effects (shading/textures). If you use PNG, provide multiple sizes and pixel-perfect assets.
Provide alternative text / accessibility labels
Every icon used alone must have an accessibility name (aria-label / alt). Decorative icons should be declared decorative to screen readers to avoid noise.
Avoid hardware replicas and dated metaphors
Hardware and brand-specific objects can date quickly and may not be universally recognized. Use generic, timeless metaphors or system-provided symbols for hardware if necessary.
Practical Production Rules
Item
Recommendation
Artboard
24×24 px
Live area
20×20 px
Baseline stroke
2 px @ 24 px (scale proportionally)
Minimum readable size
16 px
Exports
16 / 20 / 24 / 32 / 40 / 48 px (SVG preferred)
File format
SVG primary; PNG only for raster needs
Hit area
≥44×44 px interactive target
Standard Icons
For icons to represent common actions in menus, toolbars, buttons and other places in interfaces across APPEX NOW platforms.
Editing
Action
Icon
Symbol Name
Save/Done
Checkmark
Cancel/Close
xmark
Delete
Trash
Edit
Pencil
Rename
Pencil writing
Compose
A pencil in square
Add
Plus
Add
Plus in circle
Add
Plus in rectangle
Remove
Minus
Remove
Minus in circle
Remove
Minus in rectangle
Copy
File on File
Paste
Flopy
More
Ellipsis - vertical
More
Ellipsis - horizontal
Hide
Banned eye
Show
Open eye
Attach
Clip
Lock
Closed Lock
Unlock
Open Lock
Searching & Sorting
Action
Icon
Symbol Name
Seach
Magnify Glass
FIlters
Filter
Refresh
Arrows circle cycle
Reset
Arrow back
Switch Vertical
2 Arrows up/down
Switch Horizontal
2 Arrows right/left
Ascending
3 lines and arrow up
Descending
3 lines and arrow down
Tablet View
2 lines in rectangle showing table
Grid View
4 rectangles showing grid
Sharing & Exporting
Action
Icon
Symbol Name
Share file
Connecting Dots
Share Application
Arrow up from ractangal
Save
Arrows down inside ractangal
Download
Arrow down and line
Download From Cloud
Arrow down from cloud
Share Location
Nevigation
Printer
Drag Vertical
6 dots in 2 columns
Drag Horizontal
6 dots in 3 columns
Ratings
Action
Icon
Symbol Name
Like
Thumbsup
Dislike
Thumbsdown
Others
Action
Icon
Symbol Name
Down Navigation
Arrow down
Up Navigation
Arrow up
Left Navigation
Arrow left
Right Navigation
Arrow right
External Navigation
Diagonal arrow
Down
Chevron down
Up
Chevron up
Left
Chevron left
Right
Chevron right
More Down
2 Chevron down
More Up
2 Chevron up
More Left
2 Chevron left
More Right
2 Chevron right
Calander
Celander
Task Alligned
Date marked in celander
Notification
Bell
Mute Notification
Banned bell
Alert
Down i in circle
Alert
Down i in triangle
Info
i in Ccircle
Verified/Protected
Check with shield
Crossed shield
User
Person
Multiple Users
Multiple persons
Volume
Speaker
Mute
Crossed speaker
Biometric
Fingerprint
Image
Image
Folder
Folder
File
Multiple content in rectangle
Card
Bank card
Envelop
Location
Paper
Calculation
Calculator
Loading
Progressive lines
Chat
2 Comments icon
Closing Note
These best practices translate a platform-level approach to APPEX NOW’s web context: Minimal detail, consistent construction, optical balance, and accessibility-first rules. Including these guidelines in the app icon page makes it easy for designers to build new icons and for the team to maintain a single, coherent visual language across all APPEX NOW products.