{
"name": "stepper",
"title": "Stepper",
"component": "StepperIcon",
"url": "https://gentleface.com/icons/stepper",
"category": "layout",
"motif": "layout",
"added": "2026-10-19",
"history": [
{
"date": "2026-10-19",
"what": [
"added"
]
}
],
"geometry_hash": "73c1fb21f13c",
"use_for": [
"stepper",
"progress steps",
"multi step form",
"wizard steps",
"step indicator"
],
"alternatives": [
{
"icon": "progress-bar",
"why": "continuous progress without steps (progress-bar)",
"concept": "stepper"
},
{
"icon": "timeline",
"why": "a vertical history of events (timeline)",
"concept": "stepper"
}
],
"dont_confuse_with": [
{
"icon": "likert-scale",
"why": "separate circles mean an opinion scale",
"concept": "stepper"
},
{
"icon": "wand",
"why": "wand owns wizard as magic, not a multi-step form",
"concept": "stepper"
}
],
"also_fits": [
{
"concept": "decrement",
"owner": "minus-circle",
"why": "the whole −/+ stepper control"
},
{
"concept": "increment",
"owner": "plus-circle",
"why": "the whole −/+ stepper control"
},
{
"concept": "wizard",
"owner": "wand",
"why": "the step indicator of a multi-step form"
},
{
"concept": "likert-scale",
"owner": "likert-scale",
"why": "progress steps, nodes joined by a line (stepper)"
},
{
"concept": "timeline",
"owner": "timeline",
"why": "the steps of a flow (stepper)"
}
],
"family": [
"accordion",
"breadcrumb",
"breadcrumb-chevrons",
"browser",
"button",
"cards",
"carousel-horizontal",
"carousel-vertical",
"columns",
"columns-gear",
"dialog",
"dropdown-menu",
"form",
"kanban",
"layout",
"layout-dashboard",
"layout-dashboard-gear",
"layout-dashboard-pencil",
"layout-dashboard-plus",
"layout-dashboard-sparkle",
"likert-scale",
"maximize",
"minimize",
"pagination",
"panel-bottom",
"panel-top",
"picture-in-picture",
"picture-in-picture-exit",
"pin",
"progress-bar",
"rows",
"rows-grouped",
"sidebar",
"sidebar-collapse",
"sidebar-expand",
"sidebar-right",
"sidebar-right-collapse",
"sidebar-right-expand",
"slider",
"snackbar",
"table-arrow-down",
"table-arrow-up",
"table-gear",
"table-lock",
"table-search",
"table-sparkle",
"tabs",
"timeline",
"toggle",
"toggle-off",
"tooltip",
"user-interface",
"window",
"window-maximize",
"window-maximize-square",
"window-minimize",
"window-minimize-square",
"window-restore"
],
"tags": [
"stepper",
"steps",
"progress steps",
"wizard",
"multi-step",
"checkout steps",
"onboarding",
"step indicator",
"progress tracker",
"ui",
"component"
],
"size": 16,
"styles": [
"line-round",
"line-soft",
"line-sharp",
"solid-round",
"solid-soft",
"solid-sharp"
],
"default_style": "line-round",
"svg": {
"line-round": "",
"line-soft": "",
"line-sharp": "",
"solid-round": "",
"solid-soft": "",
"solid-sharp": ""
},
"svg_url": {
"line-round": "https://gentleface.com/svg/line-round/16/stepper.svg",
"line-soft": "https://gentleface.com/svg/line-soft/16/stepper.svg",
"line-sharp": "https://gentleface.com/svg/line-sharp/16/stepper.svg",
"solid-round": "https://gentleface.com/svg/solid-round/16/stepper.svg",
"solid-soft": "https://gentleface.com/svg/solid-soft/16/stepper.svg",
"solid-sharp": "https://gentleface.com/svg/solid-sharp/16/stepper.svg"
},
"png_url": {
"line-round": {
"16": "https://gentleface.com/png/line-round/16/stepper.png",
"32": "https://gentleface.com/png/line-round/32/stepper.png",
"48": "https://gentleface.com/png/line-round/48/stepper.png"
},
"line-soft": {
"16": "https://gentleface.com/png/line-soft/16/stepper.png",
"32": "https://gentleface.com/png/line-soft/32/stepper.png",
"48": "https://gentleface.com/png/line-soft/48/stepper.png"
},
"line-sharp": {
"16": "https://gentleface.com/png/line-sharp/16/stepper.png",
"32": "https://gentleface.com/png/line-sharp/32/stepper.png",
"48": "https://gentleface.com/png/line-sharp/48/stepper.png"
},
"solid-round": {
"16": "https://gentleface.com/png/solid-round/16/stepper.png",
"32": "https://gentleface.com/png/solid-round/32/stepper.png",
"48": "https://gentleface.com/png/solid-round/48/stepper.png"
},
"solid-soft": {
"16": "https://gentleface.com/png/solid-soft/16/stepper.png",
"32": "https://gentleface.com/png/solid-soft/32/stepper.png",
"48": "https://gentleface.com/png/solid-soft/48/stepper.png"
},
"solid-sharp": {
"16": "https://gentleface.com/png/solid-sharp/16/stepper.png",
"32": "https://gentleface.com/png/solid-sharp/32/stepper.png",
"48": "https://gentleface.com/png/solid-sharp/48/stepper.png"
}
},
"license": "MIT",
"author": "Alexander Kiselev"
}