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.

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