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.Logo
@Svg.Logo.With("native")
@Svg.Logo.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 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

Documentation

Section titled Documentation

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

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

@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.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.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.KeySmall

@Svg.Laptop

@Svg.LaunchPad

@Svg.Lightbulb

@Svg.LightbulbSm

@Svg.Link

@Svg.LinkSm

@Svg.LinkedIn

@Svg.Location

@Svg.LocationSm

@Svg.Lock

@Svg.LockSm

@Svg.Logo

@Svg.LogoAdvertisingAlt

@Svg.LogoAdvertisingAltMd

@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.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.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.Search

@Svg.SearchSm

@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.StarSm

@Svg.StarVerified

@Svg.StarVerifiedSm

@Svg.Strikethrough

@Svg.Stroller

@Svg.Subway

@Svg.Sync

@Svg.TIL

@Svg.Table

@Svg.Tack

@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

Edit on GitHub