SGUI / Development

Icons

Search every owned public SVG icon and adjust sizing, stroke and accessible labels.

Loading examples…

Prop playground

Select any public icon. An empty label makes the SVG decorative; label the containing action instead.

Icon

Size

Stroke width

Accessible label

Loading examples…

Icons: Searchable public icon gallery

Filter icons

AccessTimeFilledIcon

AccountCircleIcon

AddIcon

ApartmentIcon

ArrowDropDownIcon

ArrowForwardIcon

AssignmentTurnedInIcon

AutoStoriesIcon

BookIcon

BrushIcon

BuildIcon

BusinessCenterIcon

CachedIcon

CalendarTodayIcon

CheckIcon

ChevronRightIcon

CircleIcon

CourseIcon

CloseIcon

CodeIcon

ComputerIcon

ContentCopyIcon

CorporateFareIcon

DashboardIcon

DeleteOutlineIcon

DescriptionIcon

DescriptionOutlinedIcon

DnsIcon

DragIndicatorIcon

EditIcon

EventIcon

ExpandLessIcon

ExpandMoreIcon

ExploreIcon

FactCheckOutlinedIcon

FilterListIcon

FontDownloadIcon

FormatAlignCenterIcon

FormatAlignJustifyIcon

FormatAlignLeftIcon

FormatAlignRightIcon

FormatBoldIcon

FormatClearIcon

FormatColorFillIcon

FormatColorTextIcon

FormatIndentDecreaseIcon

FormatIndentIncreaseIcon

FormatItalicIcon

FormatListBulletedIcon

FormatListNumberedIcon

FormatSizeIcon

FormatStrikethroughIcon

FormatUnderlinedIcon

GroupIcon

HighlightIcon

HeartIcon

HorizontalRuleIcon

ImageIcon

KeyboardArrowDownIcon

KeyboardArrowLeftIcon

LinkIcon

LockIcon

LockResetIcon

LogoutIcon

ManageAccountsIcon

MenuBookIcon

MenuBookOutlinedIcon

MoreHorizIcon

MoreVertIcon

PaidIcon

PeopleIcon

PersonIcon

PersonAddIcon

PhotoCameraBackIcon

QuizOutlinedIcon

RedoIcon

RemoveIcon

SchoolIcon

ScienceOutlinedIcon

SearchIcon

SortIcon

StarIcon

SubscriptIcon

SuperscriptIcon

TaskAltIcon

TerminalIcon

TranslateIcon

TuneIcon

UndoIcon

UploadFileIcon

ViewColumnIcon

ViewListIcon

ViewWeekIcon

VisibilityOffIcon

VpnKeyIcon

WindowIcon

WorkOutlineOutlinedIcon

'use client';

import { AccessTimeFilledIcon, AccountCircleIcon, AddIcon, ApartmentIcon, ArrowDropDownIcon, ArrowForwardIcon, AssignmentTurnedInIcon, AutoStoriesIcon, BookIcon, BrushIcon, BuildIcon, BusinessCenterIcon, CachedIcon, CalendarTodayIcon, CheckIcon, ChevronRightIcon, CircleIcon, CourseIcon, CloseIcon, CodeIcon, ComputerIcon, ContentCopyIcon, CorporateFareIcon, DashboardIcon, DeleteOutlineIcon, DescriptionIcon, DescriptionOutlinedIcon, DnsIcon, DragIndicatorIcon, EditIcon, EventIcon, ExpandLessIcon, ExpandMoreIcon, ExploreIcon, FactCheckOutlinedIcon, FilterListIcon, FontDownloadIcon, FormatAlignCenterIcon, FormatAlignJustifyIcon, FormatAlignLeftIcon, FormatAlignRightIcon, FormatBoldIcon, FormatClearIcon, FormatColorFillIcon, FormatColorTextIcon, FormatIndentDecreaseIcon, FormatIndentIncreaseIcon, FormatItalicIcon, FormatListBulletedIcon, FormatListNumberedIcon, FormatSizeIcon, FormatStrikethroughIcon, FormatUnderlinedIcon, GroupIcon, HighlightIcon, HeartIcon, HorizontalRuleIcon, ImageIcon, KeyboardArrowDownIcon, KeyboardArrowLeftIcon, LinkIcon, LockIcon, LockResetIcon, LogoutIcon, ManageAccountsIcon, MenuBookIcon, MenuBookOutlinedIcon, MoreHorizIcon, MoreVertIcon, PaidIcon, PeopleIcon, PersonIcon, PersonAddIcon, PhotoCameraBackIcon, QuizOutlinedIcon, RedoIcon, RemoveIcon, SchoolIcon, ScienceOutlinedIcon, SearchIcon, SortIcon, StarIcon, SubscriptIcon, SuperscriptIcon, TaskAltIcon, TerminalIcon, TranslateIcon, TuneIcon, UndoIcon, UploadFileIcon, ViewColumnIcon, ViewListIcon, ViewWeekIcon, VisibilityOffIcon, VpnKeyIcon, WindowIcon, WorkOutlineOutlinedIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/experimental';

export default function IconGalleryExample() {
  return (
    <>
      <Stack direction="row" wrap gap={4}>
        <Stack align="center" gap={2}><AccessTimeFilledIcon size={24} strokeWidth={2} /><Typography variant="caption">AccessTimeFilledIcon</Typography></Stack>
        <Stack align="center" gap={2}><AccountCircleIcon size={24} strokeWidth={2} /><Typography variant="caption">AccountCircleIcon</Typography></Stack>
        <Stack align="center" gap={2}><AddIcon size={24} strokeWidth={2} /><Typography variant="caption">AddIcon</Typography></Stack>
        <Stack align="center" gap={2}><ApartmentIcon size={24} strokeWidth={2} /><Typography variant="caption">ApartmentIcon</Typography></Stack>
        <Stack align="center" gap={2}><ArrowDropDownIcon size={24} strokeWidth={2} /><Typography variant="caption">ArrowDropDownIcon</Typography></Stack>
        <Stack align="center" gap={2}><ArrowForwardIcon size={24} strokeWidth={2} /><Typography variant="caption">ArrowForwardIcon</Typography></Stack>
        <Stack align="center" gap={2}><AssignmentTurnedInIcon size={24} strokeWidth={2} /><Typography variant="caption">AssignmentTurnedInIcon</Typography></Stack>
        <Stack align="center" gap={2}><AutoStoriesIcon size={24} strokeWidth={2} /><Typography variant="caption">AutoStoriesIcon</Typography></Stack>
        <Stack align="center" gap={2}><BookIcon size={24} strokeWidth={2} /><Typography variant="caption">BookIcon</Typography></Stack>
        <Stack align="center" gap={2}><BrushIcon size={24} strokeWidth={2} /><Typography variant="caption">BrushIcon</Typography></Stack>
        <Stack align="center" gap={2}><BuildIcon size={24} strokeWidth={2} /><Typography variant="caption">BuildIcon</Typography></Stack>
        <Stack align="center" gap={2}><BusinessCenterIcon size={24} strokeWidth={2} /><Typography variant="caption">BusinessCenterIcon</Typography></Stack>
        <Stack align="center" gap={2}><CachedIcon size={24} strokeWidth={2} /><Typography variant="caption">CachedIcon</Typography></Stack>
        <Stack align="center" gap={2}><CalendarTodayIcon size={24} strokeWidth={2} /><Typography variant="caption">CalendarTodayIcon</Typography></Stack>
        <Stack align="center" gap={2}><CheckIcon size={24} strokeWidth={2} /><Typography variant="caption">CheckIcon</Typography></Stack>
        <Stack align="center" gap={2}><ChevronRightIcon size={24} strokeWidth={2} /><Typography variant="caption">ChevronRightIcon</Typography></Stack>
        <Stack align="center" gap={2}><CircleIcon size={24} strokeWidth={2} /><Typography variant="caption">CircleIcon</Typography></Stack>
        <Stack align="center" gap={2}><CourseIcon size={24} strokeWidth={2} /><Typography variant="caption">CourseIcon</Typography></Stack>
        <Stack align="center" gap={2}><CloseIcon size={24} strokeWidth={2} /><Typography variant="caption">CloseIcon</Typography></Stack>
        <Stack align="center" gap={2}><CodeIcon size={24} strokeWidth={2} /><Typography variant="caption">CodeIcon</Typography></Stack>
        <Stack align="center" gap={2}><ComputerIcon size={24} strokeWidth={2} /><Typography variant="caption">ComputerIcon</Typography></Stack>
        <Stack align="center" gap={2}><ContentCopyIcon size={24} strokeWidth={2} /><Typography variant="caption">ContentCopyIcon</Typography></Stack>
        <Stack align="center" gap={2}><CorporateFareIcon size={24} strokeWidth={2} /><Typography variant="caption">CorporateFareIcon</Typography></Stack>
        <Stack align="center" gap={2}><DashboardIcon size={24} strokeWidth={2} /><Typography variant="caption">DashboardIcon</Typography></Stack>
        <Stack align="center" gap={2}><DeleteOutlineIcon size={24} strokeWidth={2} /><Typography variant="caption">DeleteOutlineIcon</Typography></Stack>
        <Stack align="center" gap={2}><DescriptionIcon size={24} strokeWidth={2} /><Typography variant="caption">DescriptionIcon</Typography></Stack>
        <Stack align="center" gap={2}><DescriptionOutlinedIcon size={24} strokeWidth={2} /><Typography variant="caption">DescriptionOutlinedIcon</Typography></Stack>
        <Stack align="center" gap={2}><DnsIcon size={24} strokeWidth={2} /><Typography variant="caption">DnsIcon</Typography></Stack>
        <Stack align="center" gap={2}><DragIndicatorIcon size={24} strokeWidth={2} /><Typography variant="caption">DragIndicatorIcon</Typography></Stack>
        <Stack align="center" gap={2}><EditIcon size={24} strokeWidth={2} /><Typography variant="caption">EditIcon</Typography></Stack>
        <Stack align="center" gap={2}><EventIcon size={24} strokeWidth={2} /><Typography variant="caption">EventIcon</Typography></Stack>
        <Stack align="center" gap={2}><ExpandLessIcon size={24} strokeWidth={2} /><Typography variant="caption">ExpandLessIcon</Typography></Stack>
        <Stack align="center" gap={2}><ExpandMoreIcon size={24} strokeWidth={2} /><Typography variant="caption">ExpandMoreIcon</Typography></Stack>
        <Stack align="center" gap={2}><ExploreIcon size={24} strokeWidth={2} /><Typography variant="caption">ExploreIcon</Typography></Stack>
        <Stack align="center" gap={2}><FactCheckOutlinedIcon size={24} strokeWidth={2} /><Typography variant="caption">FactCheckOutlinedIcon</Typography></Stack>
        <Stack align="center" gap={2}><FilterListIcon size={24} strokeWidth={2} /><Typography variant="caption">FilterListIcon</Typography></Stack>
        <Stack align="center" gap={2}><FontDownloadIcon size={24} strokeWidth={2} /><Typography variant="caption">FontDownloadIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatAlignCenterIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatAlignCenterIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatAlignJustifyIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatAlignJustifyIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatAlignLeftIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatAlignLeftIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatAlignRightIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatAlignRightIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatBoldIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatBoldIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatClearIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatClearIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatColorFillIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatColorFillIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatColorTextIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatColorTextIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatIndentDecreaseIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatIndentDecreaseIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatIndentIncreaseIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatIndentIncreaseIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatItalicIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatItalicIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatListBulletedIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatListBulletedIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatListNumberedIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatListNumberedIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatSizeIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatSizeIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatStrikethroughIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatStrikethroughIcon</Typography></Stack>
        <Stack align="center" gap={2}><FormatUnderlinedIcon size={24} strokeWidth={2} /><Typography variant="caption">FormatUnderlinedIcon</Typography></Stack>
        <Stack align="center" gap={2}><GroupIcon size={24} strokeWidth={2} /><Typography variant="caption">GroupIcon</Typography></Stack>
        <Stack align="center" gap={2}><HighlightIcon size={24} strokeWidth={2} /><Typography variant="caption">HighlightIcon</Typography></Stack>
        <Stack align="center" gap={2}><HeartIcon size={24} strokeWidth={2} /><Typography variant="caption">HeartIcon</Typography></Stack>
        <Stack align="center" gap={2}><HorizontalRuleIcon size={24} strokeWidth={2} /><Typography variant="caption">HorizontalRuleIcon</Typography></Stack>
        <Stack align="center" gap={2}><ImageIcon size={24} strokeWidth={2} /><Typography variant="caption">ImageIcon</Typography></Stack>
        <Stack align="center" gap={2}><KeyboardArrowDownIcon size={24} strokeWidth={2} /><Typography variant="caption">KeyboardArrowDownIcon</Typography></Stack>
        <Stack align="center" gap={2}><KeyboardArrowLeftIcon size={24} strokeWidth={2} /><Typography variant="caption">KeyboardArrowLeftIcon</Typography></Stack>
        <Stack align="center" gap={2}><LinkIcon size={24} strokeWidth={2} /><Typography variant="caption">LinkIcon</Typography></Stack>
        <Stack align="center" gap={2}><LockIcon size={24} strokeWidth={2} /><Typography variant="caption">LockIcon</Typography></Stack>
        <Stack align="center" gap={2}><LockResetIcon size={24} strokeWidth={2} /><Typography variant="caption">LockResetIcon</Typography></Stack>
        <Stack align="center" gap={2}><LogoutIcon size={24} strokeWidth={2} /><Typography variant="caption">LogoutIcon</Typography></Stack>
        <Stack align="center" gap={2}><ManageAccountsIcon size={24} strokeWidth={2} /><Typography variant="caption">ManageAccountsIcon</Typography></Stack>
        <Stack align="center" gap={2}><MenuBookIcon size={24} strokeWidth={2} /><Typography variant="caption">MenuBookIcon</Typography></Stack>
        <Stack align="center" gap={2}><MenuBookOutlinedIcon size={24} strokeWidth={2} /><Typography variant="caption">MenuBookOutlinedIcon</Typography></Stack>
        <Stack align="center" gap={2}><MoreHorizIcon size={24} strokeWidth={2} /><Typography variant="caption">MoreHorizIcon</Typography></Stack>
        <Stack align="center" gap={2}><MoreVertIcon size={24} strokeWidth={2} /><Typography variant="caption">MoreVertIcon</Typography></Stack>
        <Stack align="center" gap={2}><PaidIcon size={24} strokeWidth={2} /><Typography variant="caption">PaidIcon</Typography></Stack>
        <Stack align="center" gap={2}><PeopleIcon size={24} strokeWidth={2} /><Typography variant="caption">PeopleIcon</Typography></Stack>
        <Stack align="center" gap={2}><PersonIcon size={24} strokeWidth={2} /><Typography variant="caption">PersonIcon</Typography></Stack>
        <Stack align="center" gap={2}><PersonAddIcon size={24} strokeWidth={2} /><Typography variant="caption">PersonAddIcon</Typography></Stack>
        <Stack align="center" gap={2}><PhotoCameraBackIcon size={24} strokeWidth={2} /><Typography variant="caption">PhotoCameraBackIcon</Typography></Stack>
        <Stack align="center" gap={2}><QuizOutlinedIcon size={24} strokeWidth={2} /><Typography variant="caption">QuizOutlinedIcon</Typography></Stack>
        <Stack align="center" gap={2}><RedoIcon size={24} strokeWidth={2} /><Typography variant="caption">RedoIcon</Typography></Stack>
        <Stack align="center" gap={2}><RemoveIcon size={24} strokeWidth={2} /><Typography variant="caption">RemoveIcon</Typography></Stack>
        <Stack align="center" gap={2}><SchoolIcon size={24} strokeWidth={2} /><Typography variant="caption">SchoolIcon</Typography></Stack>
        <Stack align="center" gap={2}><ScienceOutlinedIcon size={24} strokeWidth={2} /><Typography variant="caption">ScienceOutlinedIcon</Typography></Stack>
        <Stack align="center" gap={2}><SearchIcon size={24} strokeWidth={2} /><Typography variant="caption">SearchIcon</Typography></Stack>
        <Stack align="center" gap={2}><SortIcon size={24} strokeWidth={2} /><Typography variant="caption">SortIcon</Typography></Stack>
        <Stack align="center" gap={2}><StarIcon size={24} strokeWidth={2} /><Typography variant="caption">StarIcon</Typography></Stack>
        <Stack align="center" gap={2}><SubscriptIcon size={24} strokeWidth={2} /><Typography variant="caption">SubscriptIcon</Typography></Stack>
        <Stack align="center" gap={2}><SuperscriptIcon size={24} strokeWidth={2} /><Typography variant="caption">SuperscriptIcon</Typography></Stack>
        <Stack align="center" gap={2}><TaskAltIcon size={24} strokeWidth={2} /><Typography variant="caption">TaskAltIcon</Typography></Stack>
        <Stack align="center" gap={2}><TerminalIcon size={24} strokeWidth={2} /><Typography variant="caption">TerminalIcon</Typography></Stack>
        <Stack align="center" gap={2}><TranslateIcon size={24} strokeWidth={2} /><Typography variant="caption">TranslateIcon</Typography></Stack>
        <Stack align="center" gap={2}><TuneIcon size={24} strokeWidth={2} /><Typography variant="caption">TuneIcon</Typography></Stack>
        <Stack align="center" gap={2}><UndoIcon size={24} strokeWidth={2} /><Typography variant="caption">UndoIcon</Typography></Stack>
        <Stack align="center" gap={2}><UploadFileIcon size={24} strokeWidth={2} /><Typography variant="caption">UploadFileIcon</Typography></Stack>
        <Stack align="center" gap={2}><ViewColumnIcon size={24} strokeWidth={2} /><Typography variant="caption">ViewColumnIcon</Typography></Stack>
        <Stack align="center" gap={2}><ViewListIcon size={24} strokeWidth={2} /><Typography variant="caption">ViewListIcon</Typography></Stack>
        <Stack align="center" gap={2}><ViewWeekIcon size={24} strokeWidth={2} /><Typography variant="caption">ViewWeekIcon</Typography></Stack>
        <Stack align="center" gap={2}><VisibilityOffIcon size={24} strokeWidth={2} /><Typography variant="caption">VisibilityOffIcon</Typography></Stack>
        <Stack align="center" gap={2}><VpnKeyIcon size={24} strokeWidth={2} /><Typography variant="caption">VpnKeyIcon</Typography></Stack>
        <Stack align="center" gap={2}><WindowIcon size={24} strokeWidth={2} /><Typography variant="caption">WindowIcon</Typography></Stack>
        <Stack align="center" gap={2}><WorkOutlineOutlinedIcon size={24} strokeWidth={2} /><Typography variant="caption">WorkOutlineOutlinedIcon</Typography></Stack>
      </Stack>
    </>
  );
}

Icons: Activity icon mapping

Host activity names map to owned icons; unknown types use a fallback. No application contracts are imported.

Activity type

Loading examples…

Icons

Prop playground

Examples

Icons: Searchable public icon gallery

Icons: Activity icon mapping

Contains

Used In

Prop playground

Icons: Searchable public icon gallery

Icons: Activity icon mapping