Logo of UI Challenges
Sign in

Gallery

See what others have created

Icons

santhosh_kumar

@santhosh_kumar

HardSaaS

Icons

Design a small icon system for one product surface: toolbar actions, navigation, or status indicators. Pick a specific context and keep it tight. The goal is not a pretty icon gallery; it is a set that works at 16–24 px and still makes sense when embedded in a real UI.

Show the icons inside the interface they belong to, with labels where needed and enough spacing that the shape can be judged on its own. Include the states that matter for the chosen context: default, hover, active, selected, disabled, and any notification or unread treatment. If an icon is purely decorative, make that obvious by how it is used.

Keep the visual language consistent: stroke weight, corner radius, optical size, and filled vs outline rules should all match. If one symbol is likely to be ambiguous, solve it with a label, tooltip, or alternate treatment rather than forcing the icon to do all the work. The final screen should show that the set is recognizable, usable, and coherent in context.

What to deliver

  • Design a compact icon set for a single product context.
  • Show the icons in use inside a real interface, not as a standalone sheet.
  • Include active, hover, disabled, and selected states where relevant.
  • Define consistent stroke, corner, and grid rules across the set.
  • Show one ambiguous icon and its labeled fallback or tooltip treatment.

Remember, simplicity is key with icons. A well-designed icon should be understandable at a glance. Try designing in a grid to maintain consistency in size and proportions across your icon set.