Guide 04
SaaS Onboarding Icons: Turn Setup Steps into Clear Next Actions
Onboarding artwork should help someone start useful work, not make unfinished setup look complete. A workspace flow often mixes required configuration, optional recommendations and background checks. The same check mark cannot explain all three. This guide uses a fictional team workspace with profile setup, invitations and a first project to show how to create a clear visual vocabulary around real product states.
Separate required setup from helpful suggestions
List the smallest set of actions that genuinely enables the product. In the example, naming the workspace and creating a first project might be essential, while inviting colleagues and adding an avatar are optional. Put those categories into the content model. An icon should support the distinction, not create a hidden rule that users discover only when a Continue button stays disabled.
Give each task an action label and an honest consequence: Name your workspace, Invite a teammate, or Create your first project. Add Optional where appropriate. A friendly person symbol can identify the invitation task, but the accompanying text must explain whether invitations are needed to proceed. Avoid using completion percentages that treat optional suggestions as mandatory work unless the interface explicitly explains how that percentage is calculated.
Choose the right kind of progress display
Use a step indicator for a genuinely ordered sequence and a checklist for tasks that can be completed independently. A user who can create a project before adding an avatar should not be forced into a misleading numbered route. In a checklist, keep each task's state visible and let the primary action point to the next useful piece of work.
The U.S. Web Design System step indicator separates progress display from navigation and recommends a heading for each step. W3C's multi-page forms tutorial discusses communicating progress across a longer process. Apply those ideas to the sample: label the current task clearly, show where it sits in the flow and provide explicit Back and Continue controls when the order matters.
From the library
Find a style that feels like your product.
Compare real icons from the library. Open a pack to search its artwork, inspect source licenses and choose an SVG or PNG export.
Distinguish attempted, pending and completed work
Sending an invitation is not the same event as a teammate joining. A submitted connection request is not necessarily an active integration. Write these states down before drawing badges. The sample invitation task could say Invitation sent with a secondary Pending acceptance message, while the overall onboarding checklist records only the action the current user can actually complete.
Give background checks a calm working state, a useful failure message and a retry path when retrying is supported. Do not leave a spinner running beside a green completion check. If someone closes onboarding and returns later, reload the task states from the product's actual records. Cosmetic completion stored only in the current page can make the interface contradict reality after a refresh or on another device.
| Task | User action finished | Separate downstream state |
|---|---|---|
| Invite a teammate | Invitation was sent | Recipient has not yet joined |
| Connect a service | Credentials were submitted | Connection check is running |
| Create a project | Project was saved | Project contains no content yet |
Use expressive artwork where it earns its space
A welcome card can support more detailed artwork than a compact checklist row. Compare a colorful illustration from Fluent Color with quieter interface symbols from Fluent or Charm. Keep expressive artwork out of the small state slot if it makes Pending and Complete harder to distinguish.
Use the same task metaphor in the welcome screen, checklist and later settings page. A workspace should not switch from a building to a cloud to a folder without a reason. Check the longest task label and the narrowest supported layout before finalizing the art. If the illustration pushes the actual next action below useful viewing space, reduce its role rather than shrinking the instructions.
From the library
Try color. Explore duotone.
Give an explanation a different visual treatment. Browse Fluent Color and Phosphor Duotone, then compare them at the size your readers will see.
Review the incomplete journey, not only the happy path
Test with a fictional workspace that has a name, an unanswered invitation and no project. Ask someone to identify what they can do now and what depends on another person. Repeat after leaving and reopening the flow. A good onboarding screen makes partial progress understandable without suggesting that the product is broken or that an optional task blocks everything.
- Required and optional tasks are labeled in text.
- The progress display matches the real ordering of the work.
- Pending external events do not masquerade as user failures.
- A completed task stays complete after refresh and return.
- Every unfinished state offers a useful action or a clear explanation.
- Illustrations support the instructions without dominating the screen.
