Skip to main content
Sections

Icons

Razor
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
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
DocumentFill DocumentFill icon
DocumentStack DocumentStack icon
DocumentStackFill DocumentStackFill icon
FlagOffFill FlagOffFill icon
MailOpenFill MailOpenFill icon
ModDashboard ModDashboard icon
ModDashboardFill ModDashboardFill icon
ModReviewStack ModReviewStack icon
ModReviewStackFill ModReviewStackFill 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
ServiceCCPA ServiceCCPA icon
ServiceFacebook ServiceFacebook icon
ServiceGitHub ServiceGitHub icon
ServiceGoogle ServiceGoogle icon
ServiceInstagram ServiceInstagram icon
ServiceLinkedIn ServiceLinkedIn icon
ServiceThreads ServiceThreads icon
ServiceYouTube ServiceYouTube icon
SettingsFill SettingsFill icon
TagStackFill TagStackFill icon
UserStackFill UserStackFill icon
VoteDownFill VoteDownFill icon
Edit on GitHub File an issue on GitHub
Deploys by Netlify