Skip to main content
Sections

Icons

Svelte
Figma

Stacks provides a complete icon set, managed separately in the Stacks-Icons repository. There you’ll find deeper documentation on the various uses as well as the icons’ source in our design tool Figma.

Usage

Section titled Usage

Stacks icons are designed to be directly injected into the markup as an svg element. This allows us to color them on the fly using any of our atomic classes. We have different helpers in different environments.

Svelte

Section titled Svelte

If you are working in a Svelte project, you can use the Icon component to render an icon. This component will render the icon as an svg element with the appropriate classes and attributes (docs). 

<script lang="ts">
    import { IconServiceCCPA } from "@stackoverflow/stacks-icons/icons";
</script>

<Icon src="IconServiceCCPA" />
<Icon src="IconServiceCCPA" class="native" />
<Icon src="IconServiceCCPA" class="fc-black-350 float-right" />
Default
With native colors
With arbitrary classes

Dotnet

Section titled Dotnet

If you’re working in a dotnet project, we have a helper that can be called with @Svg. and the icon name, eg. @Svg.Answer. By default, any icon will inherit the text color of the parent element. Optionally, you can pass the class native to the icon to render any native colors that are included eg. @Svg.ServiceCCPA.With("native"). This same syntax allows you to pass additional arbitrary classes like atomic helpers, or js- prefixed classes.

@Svg.ServiceCCPA
@Svg.ServiceCCPA.With("native")
@Svg.ServiceCCPA.With("fc-black-350 float-right js-dropdown-target")
Default
With native colors
With arbitrary classes

Requesting an icon

Section titled Requesting an icon

If an icon you need isn’t here, please do one of the following two options:

  1. Submit a request outlining the desired icon, the icon’s intended purposed, and where it will be used.
  2. If the icon is ready, submit a pull request to have it to be reviewed. Please be sure to provide the same information as above.

Icon set

Section titled Icon set
AnswerStack AnswerStack icon
AnswerStackFill AnswerStackFill icon
ArrowDownLeft ArrowDownLeft icon
ArrowDownLeftBox ArrowDownLeftBox icon
ArrowDownRight ArrowDownRight icon
ArrowLeftBox ArrowLeftBox icon
ArrowRightBox ArrowRightBox icon
ArrowUpLeft ArrowUpLeft icon
ArrowUpRight ArrowUpRight icon
ArrowUpRightBox ArrowUpRightBox icon
BookmarkFill BookmarkFill icon
BookmarkStack BookmarkStack icon
BookmarkStackFill BookmarkStackFill icon
ChallengeFill ChallengeFill icon
Check16Circle Check16Circle icon
Check16FillCircle Check16FillCircle icon
Check16FillSquare Check16FillSquare icon
Check24Circle Check24Circle icon
Check24FillCircle Check24FillCircle icon
Check24FillSquare Check24FillSquare icon
Check32Circle Check32Circle icon
Check32FillCircle Check32FillCircle icon
Check32FillSquare Check32FillSquare icon
CheckCircle CheckCircle icon
CheckFillCircle CheckFillCircle icon
CheckFillSquare CheckFillSquare icon
Chevron12Down Chevron12Down icon
Chevron12DownFill Chevron12DownFill icon
Chevron12DownUp Chevron12DownUp icon
Chevron12DownUpFill Chevron12DownUpFill icon
Chevron12Left Chevron12Left icon
Chevron12LeftFill Chevron12LeftFill icon
Chevron12Right Chevron12Right icon
Chevron12RightFill Chevron12RightFill icon
Chevron12Up Chevron12Up icon
Chevron12UpDown Chevron12UpDown icon
Chevron12UpDownFill Chevron12UpDownFill icon
Chevron12UpFill Chevron12UpFill icon
Chevron16Down Chevron16Down icon
Chevron16DownFill Chevron16DownFill icon
Chevron16DownUp Chevron16DownUp icon
Chevron16DownUpFill Chevron16DownUpFill icon
Chevron16Left Chevron16Left icon
Chevron16LeftFill Chevron16LeftFill icon
Chevron16Right Chevron16Right icon
Chevron16RightFill Chevron16RightFill icon
Chevron16Up Chevron16Up icon
Chevron16UpDown Chevron16UpDown icon
Chevron16UpDownFill Chevron16UpDownFill icon
Chevron16UpFill Chevron16UpFill icon
ChevronDown ChevronDown icon
ChevronLeft ChevronLeft icon
ChevronRight ChevronRight icon
CommunityFill CommunityFill icon
CompanyFill CompanyFill icon
ComposeComment ComposeComment icon
ComposeCommentFill ComposeCommentFill icon
ComposeDocument ComposeDocument icon
ComposeDocumentFill ComposeDocumentFill icon
ComposeFill ComposeFill icon
Cross16Circle Cross16Circle icon
Cross16FillCircle Cross16FillCircle icon
Cross16FillSquare Cross16FillSquare icon
Cross24Circle Cross24Circle icon
Cross24FillCircle Cross24FillCircle icon
Cross24FillSquare Cross24FillSquare icon
Cross32Circle Cross32Circle icon
Cross32FillCircle Cross32FillCircle icon
Cross32FillSquare Cross32FillSquare icon
CrossCircle CrossCircle icon
CrossFillCircle CrossFillCircle icon
CrossFillSquare CrossFillSquare icon
DashboardFill DashboardFill icon
DocumentFill DocumentFill icon
DocumentStack DocumentStack icon
DocumentStackFill DocumentStackFill icon
FlagOffFill FlagOffFill icon
Glyph16Square Glyph16Square icon
Glyph24Square Glyph24Square icon
Glyph32Square Glyph32Square icon
Glyph64Square Glyph64Square icon
GlyphSquare GlyphSquare icon
Lightbulb32 Lightbulb32 icon
LogoHeadline1 LogoHeadline1 icon
LogoHeadline2 LogoHeadline2 icon
MailOpenFill MailOpenFill icon
ModDashboard ModDashboard icon
ModDashboardFill ModDashboardFill icon
ModMessagesStack ModMessagesStack icon
ModMessagesStackFill ModMessagesStackFill icon
ModStackFill ModStackFill icon
Notification Notification icon
NotificationFill NotificationFill icon
NotificationOff NotificationOff icon
NotificationOffFill NotificationOffFill icon
QuestionFill QuestionFill icon
QuestionStack QuestionStack icon
QuestionStackFill QuestionStackFill icon
ServiceBackstage ServiceBackstage icon
ServiceBackstage32 ServiceBackstage32 icon
ServiceBackstage64 ServiceBackstage64 icon
ServiceCCPA ServiceCCPA icon
ServiceConfluence ServiceConfluence icon
ServiceConfluence32 ServiceConfluence32 icon
ServiceConfluence64 ServiceConfluence64 icon
ServiceFacebook ServiceFacebook icon
ServiceGitHub ServiceGitHub icon
ServiceGoogle ServiceGoogle icon
ServiceGoogleDrive ServiceGoogleDrive icon
ServiceGoogleDrive32 ServiceGoogleDrive32 icon
ServiceGoogleDrive64 ServiceGoogleDrive64 icon
ServiceInstagram ServiceInstagram icon
ServiceJira ServiceJira icon
ServiceJira32 ServiceJira32 icon
ServiceJira64 ServiceJira64 icon
ServiceLinkedIn ServiceLinkedIn icon
ServiceMCP32 ServiceMCP32 icon
ServiceMCP64 ServiceMCP64 icon
ServiceMicrosoft ServiceMicrosoft icon
ServiceMicrosoft32 ServiceMicrosoft32 icon
ServiceMicrosoft64 ServiceMicrosoft64 icon
ServiceMicrosoftTeams ServiceMicrosoftTeams icon
ServiceMicrosoftTeams32 ServiceMicrosoftTeams32 icon
ServiceMicrosoftTeams64 ServiceMicrosoftTeams64 icon
ServiceMoveworks ServiceMoveworks icon
ServiceMoveworks32 ServiceMoveworks32 icon
ServiceMoveworks64 ServiceMoveworks64 icon
ServiceOkta ServiceOkta icon
ServiceOkta32 ServiceOkta32 icon
ServiceOkta64 ServiceOkta64 icon
ServiceSCIM ServiceSCIM icon
ServiceSCIM32 ServiceSCIM32 icon
ServiceSCIM64 ServiceSCIM64 icon
ServiceSlack ServiceSlack icon
ServiceSlack32 ServiceSlack32 icon
ServiceSlack64 ServiceSlack64 icon
ServiceThreads ServiceThreads icon
ServiceVisualStudioCode ServiceVisualStudioCode icon
ServiceVisualStudioCode32 ServiceVisualStudioCode32 icon
ServiceVisualStudioCode64 ServiceVisualStudioCode64 icon
ServiceWebhooks ServiceWebhooks icon
ServiceWebhooks32 ServiceWebhooks32 icon
ServiceWebhooks64 ServiceWebhooks64 icon
ServiceYouTube ServiceYouTube icon
SettingsFill SettingsFill icon
StackCircle StackCircle icon
StackRectangle StackRectangle icon
StarHalfFill StarHalfFill icon
TagStackFill TagStackFill icon
UserStackFill UserStackFill icon
VoteDownFill VoteDownFill icon
Edit on GitHub File an issue on GitHub
Deploys by Netlify