Sections

Icons

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.

Production

Section titled Production

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.Wave
@Svg.Wave.With("native")
@Svg.Wave.With("fc-black-350 float-right js-dropdown-target")

Default

With native colors

With arbitrary classes

Prototypes

Section titled Prototypes

Our icon set also includes a JavaScript library for use in prototypes outside our production environment. This JavaScript is loaded in our Stacks playground in Codepen. When using data-icon attributes, you need to prefix the icon names with Icon (e.g. IconWave). 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="IconWave"></svg>
<svg data-icon="IconWave" class="native"></svg>
<svg data-icon="IconWave" class="fc-black-350 float-right js-dropdown-target"></svg>

Default

With native colors

With arbitrary classes

Documentation

Section titled Documentation

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

{% icon "Wave" %}
{% icon "Wave", "native" %}
{% icon "Wave", "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:

Submit a request outlining the desired icon, the icon’s intended purposed, and where it will be used.
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

@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.ArrowDownLong ArrowDownLong icon

@Svg.ArrowDownSm ArrowDownSm icon

@Svg.ArrowLeft ArrowLeft icon

@Svg.ArrowLeftAlt ArrowLeftAlt icon

@Svg.ArrowLeftAltSm ArrowLeftAltSm 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.ArrowUpLong ArrowUpLong 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.BellSm BellSm 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.CodeblockAlt CodeblockAlt icon

@Svg.Coins Coins icon

@Svg.Collection Collection icon

@Svg.Columns Columns icon

@Svg.Computer Computer icon

@Svg.Confluence Confluence 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.Handshake Handshake 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.LightbulbAlt LightbulbAlt icon

@Svg.LightbulbSm LightbulbSm icon

@Svg.Link Link 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.Mail Mail icon

@Svg.MailOpen MailOpen icon

@Svg.MailOpenSm MailOpenSm 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.Microscope Microscope 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.Promoted Promoted 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.Redact Redact icon

@Svg.RedactSm RedactSm 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.Ruler Ruler icon

@Svg.SOS SOS icon

@Svg.Save Save icon

@Svg.School School icon

@Svg.SchoolSm SchoolSm icon

@Svg.ScreenFull ScreenFull icon

@Svg.ScreenNormal ScreenNormal icon

@Svg.Search Search icon

@Svg.SearchSm SearchSm icon

@Svg.ShareAlt ShareAlt 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.SyncSm SyncSm 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.Unflag Unflag icon

@Svg.UnflagSm UnflagSm icon

@Svg.Unlock Unlock icon

@Svg.UnlockSm UnlockSm icon

@Svg.UnorderedList UnorderedList icon

@Svg.Unsync Unsync icon

@Svg.UnsyncSm UnsyncSm icon

@Svg.Untrash Untrash icon

@Svg.UntrashSm UntrashSm icon

@Svg.VK VK icon

@Svg.Vacation Vacation icon

@Svg.Wand Wand icon

@Svg.Wave Wave icon

@Svg.Yandex Yandex icon

Deploys by Netlify