Icons

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.

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.

If you’re in Stack Overflow’s production environment, we have a helper that can be called with @Svg. and the icon name, eg. @Svg.Alert. 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.Ballon.With("native"). This same syntax allows you to pass additional arbitrary classes like atomic helpers, or js- prefixed classes.

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

Our icon set also includes a JavaScript library for use in protoypes outside our production environment. This JavaScript is loaded in our Stacks playground in Codepen. If you’re building a prototype in your own environment, you’ll need to include Stacks as a dependency as well as the icons library.

<svg data-icon="Logo"></svg>
<svg data-icon="Logo" class="native"></svg>
<svg data-icon="Logo" class="fc-black-350 float-right js-dropdown-target"></svg>
Default
With native colors
With arbitrary classes

For use within our documentation, we’ve also included a Liquid helper.

{% icon "Logo" %}
{% icon "Logo", "native" %}
{% icon "Logo", "fc-black-350 float-right js-dropdown-target" %}
Default
With native colors
With arbitrary classes

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.
@Svg.Accessibility Accessibility icon
@Svg.Achievements Achievements icon
@Svg.AchievementsLg AchievementsLg icon
@Svg.AchievementsSm AchievementsSm icon
@Svg.Alert Alert icon
@Svg.AlertCircle AlertCircle icon
@Svg.AlertCircleSm AlertCircleSm icon
@Svg.AlertSm AlertSm icon
@Svg.Answer Answer icon
@Svg.AnswerEs AnswerEs icon
@Svg.AnswerPt AnswerPt icon
@Svg.AnswerRu AnswerRu icon
@Svg.Approve Approve icon
@Svg.Archive Archive icon
@Svg.ArchiveAlt ArchiveAlt icon
@Svg.ArchiveAltSm ArchiveAltSm icon
@Svg.ArchiveSm ArchiveSm icon
@Svg.ArrowDoubleDown ArrowDoubleDown icon
@Svg.ArrowDoubleUp ArrowDoubleUp icon
@Svg.ArrowDown ArrowDown icon
@Svg.ArrowDownAlt ArrowDownAlt icon
@Svg.ArrowDownLg ArrowDownLg icon
@Svg.ArrowDownSm ArrowDownSm icon
@Svg.ArrowLeft ArrowLeft icon
@Svg.ArrowLeftAlt ArrowLeftAlt icon
@Svg.ArrowLeftSm ArrowLeftSm icon
@Svg.ArrowRight ArrowRight icon
@Svg.ArrowRightAlt ArrowRightAlt icon
@Svg.ArrowRightAltSm ArrowRightAltSm icon
@Svg.ArrowRightSm ArrowRightSm icon
@Svg.ArrowUp ArrowUp icon
@Svg.ArrowUpAlt ArrowUpAlt icon
@Svg.ArrowUpDown ArrowUpDown icon
@Svg.ArrowUpDownSm ArrowUpDownSm icon
@Svg.ArrowUpLg ArrowUpLg icon
@Svg.ArrowUpSm ArrowUpSm icon
@Svg.Asterisk Asterisk icon
@Svg.AsteriskSm AsteriskSm icon
@Svg.Badge Badge icon
@Svg.BadgeSm BadgeSm icon
@Svg.Balloon Balloon icon
@Svg.Bell Bell icon
@Svg.Bold Bold icon
@Svg.Book Book icon
@Svg.Bookmark Bookmark icon
@Svg.BookmarkAlt BookmarkAlt icon
@Svg.Briefcase Briefcase icon
@Svg.BriefcaseSm BriefcaseSm icon
@Svg.Bullhorn Bullhorn icon
@Svg.BullhornSm BullhornSm icon
@Svg.Cake Cake icon
@Svg.Calendar Calendar icon
@Svg.Chair Chair icon
@Svg.Checkmark Checkmark icon
@Svg.CheckmarkLg CheckmarkLg icon
@Svg.CheckmarkSm CheckmarkSm icon
@Svg.CheckmarkVerified CheckmarkVerified icon
@Svg.CheckmarkVerifiedSm CheckmarkVerifiedSm icon
@Svg.Clap Clap icon
@Svg.Clear Clear icon
@Svg.ClearSm ClearSm icon
@Svg.Clock Clock icon
@Svg.Code Code icon
@Svg.CodeSnippet CodeSnippet icon
@Svg.Codeblock Codeblock icon
@Svg.Coins Coins icon
@Svg.Collection Collection icon
@Svg.Columns Columns icon
@Svg.Computer Computer icon
@Svg.Copy Copy icon
@Svg.CreditCard CreditCard icon
@Svg.Crosshairs Crosshairs icon
@Svg.Currency Currency icon
@Svg.DevTo DevTo icon
@Svg.Diff Diff icon
@Svg.Discord Discord icon
@Svg.Document Document icon
@Svg.DocumentAlt DocumentAlt icon
@Svg.Download Download icon
@Svg.DownloadSm DownloadSm icon
@Svg.Dropbox Dropbox icon
@Svg.EllipsisHorizontal EllipsisHorizontal icon
@Svg.EllipsisVertical EllipsisVertical icon
@Svg.Eye Eye icon
@Svg.EyeOff EyeOff icon
@Svg.EyeOffSm EyeOffSm icon
@Svg.EyeSm EyeSm icon
@Svg.Eyes Eyes icon
@Svg.FaceFrown FaceFrown icon
@Svg.FaceJoy FaceJoy icon
@Svg.FaceMindBlown FaceMindBlown icon
@Svg.FaceNeutral FaceNeutral icon
@Svg.FaceSad FaceSad icon
@Svg.FaceShocked FaceShocked icon
@Svg.FaceSmile FaceSmile icon
@Svg.Facebook Facebook icon
@Svg.Female Female icon
@Svg.Figma Figma icon
@Svg.Filter Filter icon
@Svg.Fire Fire icon
@Svg.FireSm FireSm icon
@Svg.Fitness Fitness icon
@Svg.Flag Flag icon
@Svg.FlagGermany FlagGermany icon
@Svg.FlagSm FlagSm icon
@Svg.FlagUnitedKingdom FlagUnitedKingdom icon
@Svg.FlagUnitedStates FlagUnitedStates icon
@Svg.Float Float icon
@Svg.Food Food icon
@Svg.Four Four icon
@Svg.FourLg FourLg icon
@Svg.Gear Gear icon
@Svg.GearSm GearSm icon
@Svg.GitHub GitHub icon
@Svg.GitLab GitLab icon
@Svg.Globe Globe icon
@Svg.Google Google icon
@Svg.GoogleDrive GoogleDrive icon
@Svg.Grabber Grabber icon
@Svg.GrabberVertical GrabberVertical icon
@Svg.Graph Graph icon
@Svg.Grid Grid icon
@Svg.Hamburger Hamburger icon
@Svg.HandNice HandNice icon
@Svg.HandPointRight HandPointRight icon
@Svg.HandRock HandRock icon
@Svg.HandsTogether HandsTogether icon
@Svg.Health Health icon
@Svg.Heart Heart icon
@Svg.Help Help icon
@Svg.HelpSm HelpSm icon
@Svg.History History icon
@Svg.Home Home icon
@Svg.HorizontalRule HorizontalRule icon
@Svg.Hundred Hundred icon
@Svg.Image Image icon
@Svg.Inbox Inbox icon
@Svg.InboxSm InboxSm icon
@Svg.Indent Indent icon
@Svg.Industry Industry icon
@Svg.IndustrySm IndustrySm icon
@Svg.Info Info icon
@Svg.InfoSm InfoSm icon
@Svg.Instagram Instagram icon
@Svg.International International icon
@Svg.InternationalSm InternationalSm icon
@Svg.Italic Italic icon
@Svg.Jira Jira icon
@Svg.Key Key icon
@Svg.KeySm KeySm icon
@Svg.Laptop Laptop icon
@Svg.LaunchPad LaunchPad icon
@Svg.Lightbulb Lightbulb icon
@Svg.LightbulbSm LightbulbSm icon
@Svg.LinkSm LinkSm icon
@Svg.LinkedIn LinkedIn icon
@Svg.Location Location icon
@Svg.LocationSm LocationSm icon
@Svg.Lock Lock icon
@Svg.LockSm LockSm icon
@Svg.LogoAdvertisingAlt LogoAdvertisingAlt icon
@Svg.LogoAdvertisingAltMd LogoAdvertisingAltMd icon
@Svg.LogoCollectives LogoCollectives icon
@Svg.LogoCollectivesAltMd LogoCollectivesAltMd icon
@Svg.LogoCollectivesMd LogoCollectivesMd icon
@Svg.LogoEnterprise LogoEnterprise icon
@Svg.LogoEnterpriseAlt LogoEnterpriseAlt icon
@Svg.LogoEnterpriseAltMd LogoEnterpriseAltMd icon
@Svg.LogoEnterpriseWordmarkSm LogoEnterpriseWordmarkSm icon
@Svg.LogoGlyph LogoGlyph icon
@Svg.LogoGlyphMd LogoGlyphMd icon
@Svg.LogoGlyphSm LogoGlyphSm icon
@Svg.LogoGlyphXSm LogoGlyphXSm icon
@Svg.LogoGlyphXxs LogoGlyphXxs icon
@Svg.LogoJobs LogoJobs icon
@Svg.LogoJobsAlt LogoJobsAlt icon
@Svg.LogoJobsAltMd LogoJobsAltMd icon
@Svg.LogoMd LogoMd icon
@Svg.LogoSE LogoSE icon
@Svg.LogoSEAlternativeSm LogoSEAlternativeSm icon
@Svg.LogoSEGlyph LogoSEGlyph icon
@Svg.LogoSEGlyphMd LogoSEGlyphMd icon
@Svg.LogoSEXxs LogoSEXxs icon
@Svg.LogoSm LogoSm icon
@Svg.LogoTalent LogoTalent icon
@Svg.LogoTalentAlt LogoTalentAlt icon
@Svg.LogoTalentAltMd LogoTalentAltMd icon
@Svg.LogoTeams LogoTeams icon
@Svg.LogoTeamsAlt LogoTeamsAlt icon
@Svg.LogoTeamsAltMd LogoTeamsAltMd icon
@Svg.LogoWordmark LogoWordmark icon
@Svg.LogoWordmarkMd LogoWordmarkMd icon
@Svg.LogoWordmarkSm LogoWordmarkSm icon
@Svg.Mail Mail icon
@Svg.MailSm MailSm icon
@Svg.Markdown Markdown icon
@Svg.MarkdownPreview MarkdownPreview icon
@Svg.Medal Medal icon
@Svg.Merge Merge icon
@Svg.Message Message icon
@Svg.MessageCompose MessageCompose icon
@Svg.Microsoft Microsoft icon
@Svg.MicrosoftTeams MicrosoftTeams icon
@Svg.Migrate Migrate icon
@Svg.Milestone Milestone icon
@Svg.Minus Minus icon
@Svg.MinusSm MinusSm icon
@Svg.Moderator Moderator icon
@Svg.ModeratorSm ModeratorSm icon
@Svg.Money Money icon
@Svg.NotInterested NotInterested icon
@Svg.NotInterestedSm NotInterestedSm icon
@Svg.Okta Okta icon
@Svg.One One icon
@Svg.OneLg OneLg icon
@Svg.OpenSource OpenSource icon
@Svg.OrderedList OrderedList icon
@Svg.Outdent Outdent icon
@Svg.Paperclip Paperclip icon
@Svg.Peak Peak icon
@Svg.Pencil Pencil icon
@Svg.PencilSm PencilSm icon
@Svg.People People icon
@Svg.PeopleSm PeopleSm icon
@Svg.Person Person icon
@Svg.Phone Phone icon
@Svg.Placeholder Placeholder icon
@Svg.PlaceholderLg PlaceholderLg icon
@Svg.PlaceholderSm PlaceholderSm icon
@Svg.Play Play icon
@Svg.Plus Plus icon
@Svg.PlusOne PlusOne icon
@Svg.PlusSm PlusSm icon
@Svg.PromoteDemote PromoteDemote icon
@Svg.PromotedSm PromotedSm icon
@Svg.Question Question icon
@Svg.QuestionEs QuestionEs icon
@Svg.QuestionPt QuestionPt icon
@Svg.QuestionRu QuestionRu icon
@Svg.Quote Quote icon
@Svg.Refresh Refresh icon
@Svg.RefreshSm RefreshSm icon
@Svg.Relocation Relocation icon
@Svg.RelocationSm RelocationSm icon
@Svg.Remote Remote icon
@Svg.RemoteSm RemoteSm icon
@Svg.Reply Reply icon
@Svg.ReplySm ReplySm icon
@Svg.Reputation Reputation icon
@Svg.ReputationSm ReputationSm icon
@Svg.ReviewQueue ReviewQueue icon
@Svg.RichText RichText icon
@Svg.Rss Rss icon
@Svg.SOS SOS icon
@Svg.School School icon
@Svg.SchoolSm SchoolSm icon
@Svg.ScreenFull ScreenFull icon
@Svg.ScreenNormal ScreenNormal icon
@Svg.SearchSm SearchSm icon
@Svg.Share Share icon
@Svg.ShareSm ShareSm icon
@Svg.Shield Shield icon
@Svg.ShieldSm ShieldSm icon
@Svg.ShieldXSm ShieldXSm icon
@Svg.Skull Skull icon
@Svg.Slack Slack icon
@Svg.SmartPhone SmartPhone icon
@Svg.SmileyAdd SmileyAdd icon
@Svg.SpeechBubble SpeechBubble icon
@Svg.SpeechBubbleError SpeechBubbleError icon
@Svg.SpeechBubbleQuestion SpeechBubbleQuestion icon
@Svg.SpeechBubbleRight SpeechBubbleRight icon
@Svg.SpeechBubbleRightSm SpeechBubbleRightSm icon
@Svg.SpeechBubbleRightStar SpeechBubbleRightStar icon
@Svg.SpeechBubbleRightStarSm SpeechBubbleRightStarSm icon
@Svg.SpeechBubbleSm SpeechBubbleSm icon
@Svg.StackExchange StackExchange icon
@Svg.Star Star icon
@Svg.StarHalf StarHalf icon
@Svg.StarHalfSm StarHalfSm icon
@Svg.StarSm StarSm icon
@Svg.StarVerified StarVerified icon
@Svg.StarVerifiedSm StarVerifiedSm icon
@Svg.Strikethrough Strikethrough icon
@Svg.Stroller Stroller icon
@Svg.Subway Subway icon
@Svg.Sync Sync icon
@Svg.TIL TIL icon
@Svg.Table Table icon
@Svg.Tack Tack icon
@Svg.TackSm TackSm icon
@Svg.Tada Tada icon
@Svg.Tag Tag icon
@Svg.TagSm TagSm icon
@Svg.Tags Tags icon
@Svg.TagsSm TagsSm icon
@Svg.Theme Theme icon
@Svg.Three Three icon
@Svg.ThreeLg ThreeLg icon
@Svg.ThumbsDown ThumbsDown icon
@Svg.ThumbsUp ThumbsUp icon
@Svg.Tool Tool icon
@Svg.Trash Trash icon
@Svg.TrashSm TrashSm icon
@Svg.TrendingDown TrendingDown icon
@Svg.TrendingNone TrendingNone icon
@Svg.TrendingUp TrendingUp icon
@Svg.Twitter Twitter icon
@Svg.Two Two icon
@Svg.TwoLg TwoLg icon
@Svg.Undo Undo icon
@Svg.UndoSm UndoSm icon
@Svg.Unlock Unlock icon
@Svg.UnlockSm UnlockSm icon
@Svg.UnorderedList UnorderedList icon
@Svg.VK VK icon
@Svg.Vacation Vacation icon
@Svg.Wand Wand icon
@Svg.Wave Wave icon
@Svg.Yandex Yandex icon