Images & Design · TASK TOOLKIT

Test an icon concept at its actual display size

Develop a small icon family from a visual brief, then judge the concepts at their interface sizes. Compare silhouette, contrast, spacing, and meaning before refining detail. Deliver a contact sheet and selection rationale that reveal which icons remain distinguishable when the presentation mockup is removed.

For: Product designers developing a small icon family with clear visual distinctions.

A creative production table pairs a green camera with sculptural still life props, color swatches and a small light panel.
AI-generated task illustration · ToolAdvisor · Source-based guidance
YOUR STARTING MATERIAL

Provide action meanings, confusing pairs, existing interface references, target pixel sizes, backgrounds, and any required text labels.

YOUR STARTING OPTIONS

Recraft · Ideogram · Krea

THE FINISHED DELIVERABLE

An icon candidate sheet at target sizes, recognition review notes, and a selected family with refinement instructions.

The situation

A dashboard needs six icons for actions that users often confuse, including archive and delete. Attractive large illustrations will not establish whether those actions remain distinct in a compact toolbar. Start from the action labels, interface style, and target sizes. Generate or refine candidate concepts, place them in the real toolbar context, and ask reviewers to match each icon to an action without seeing the design team's preferred answer first.

Build a small, reviewable version

  1. Define meaning and constraints

    List the action each icon represents, its confusing neighbors, and the context in which it appears. Specify target sizes, backgrounds, stroke or fill style, and accompanying labels. Collect existing interface examples so the family brief describes concrete visual constraints instead of an abstract mood.

    Check: Every icon has a distinct action meaning and an intended display context.

  2. Explore competing silhouettes

    Create a few candidate concepts for each action while keeping the family constraints consistent. Seek meaningful silhouette differences for confusing pairs before adding detail. Preserve the action labels outside the artwork so reviewers can assess whether the symbol communicates without relying on decorative embedded words.

    Check: Confusing actions have visibly different silhouettes within a coherent family.

  3. Inspect at target sizes

    Render the candidates at each required size on the actual interface backgrounds. Inspect collapsed gaps, disappearing strokes, visual weight, and alignment beside existing controls. Remove candidates that work only when enlarged, and record the precise change needed for otherwise promising concepts.

    Check: The contact sheet shows every candidate at its real interface sizes.

  4. Run a recognition review

    Show reviewers the unlabeled candidates and a separate action list, asking them to match meanings and explain uncertainty. Review confusing pairs in the toolbar as well as alone. Choose the family using those observations, then repeat the target size check after any visual refinement.

    Check: Selection notes record recognition errors and the resulting design decisions.

Your acceptance checklist

  • Every selected icon remains visually clear at the smallest required size.
  • Confusing action pairs have distinct silhouettes and documented recognition feedback.
  • Stroke weight, spacing, and alignment remain consistent across the selected family.
  • Final delivery specifications are confirmed separately from concept image appearance.

Where the process can go wrong

  • A detailed large preview can hide an unreadable small icon.
  • Using color alone to distinguish destructive actions leaves meaning fragile.
  • Assuming a generated concept is an implementation ready asset skips production checks.

Choose the workflow deliberately

Use Recraft, Ideogram, or Krea as candidates for visual exploration, then evaluate the resulting concepts in your interface. Choose the clearest small symbol over the most elaborate large image. Confirm required asset formats and production specifications before treating a selected concept as ready for implementation.

A working brief to copy

Explore icon concepts for [ACTION LIST] in [INTERFACE CONTEXT]. Follow [EXISTING STYLE], [BACKGROUND COLORS], and [TARGET SIZES]. Prioritize clear silhouettes, balanced spacing, and a consistent family. Make [CONFUSING ACTION PAIRS] visibly distinguishable without depending only on color or embedded words. Supply several concepts for review, not a claim of final production readiness. We will place candidates into [TOOLBAR OR MENU], inspect them at actual size, and ask reviewers to match the unlabeled symbols to the intended actions.

Tool context and original sources

This is an editorial task plan using the products’ published positioning, rather than a record of controlled product testing. The steps describe a trial for you to run. Confirm current access and terms, and review each tool’s limitations.

YOUR STARTING TOOLKIT

Meet the candidates.

Generate and refine images and editable vector graphics for a design direction.

Images & Design

Develop image concepts and explore typography-led compositions.

Images & Design

Krea

Explore AI-assisted image generation, enhancement and visual iteration.

Images & Design
A DIFFERENT TASK

Keep building.

All toolkits →