Icons

All system icons are inline SVG files, invoked via a Razor helper. The helper will insert a properly formatted and minified SVG file into your view. All icons are managed and stored within the Icons repository.

Using the icon helpers

Our icons are delivered as a Razor helper in Stack Overflow’s production environment, a custom liquid tag in our documentation’s Eleventy site generator, and a JavaScript helper for use in prototypes.

Helpers should be used for all icons in lieu of SVG sprite sheets or raster image assets. This ensures a single source of truth for all icons.

Basic

<!-- Razor -->
@Svg.Logo

<!-- Liquid -->
{% icon "Logo" %}

<!-- JavaScript Helper -->
<svg data-icon="Logo"></svg>

Native colors

By default, every icon will inherit the text color of its parent. To override this and show the icon with its native colors (Our logos, for example), you can include the native class in the helper.

<!-- Razor -->
@Svg.Logo.With("native")

<!-- Liquid -->
{% icon "Logo", "native" %}

<!-- JavaScript Helper -->
<svg data-icon="Logo" class="native"></svg>

Arbitrary classes

In fact, our helper supports arbitrary classes as well.

<!-- Razor -->
@Svg.Logo.With("native float-right js-dropdown-target")

<!-- Liquid -->
{% icon "Logo", "native float-right js-dropdown-target" %}

<!-- JavaScript Helper -->
<svg data-icon="Logo" class="native float-right js-dropdown-target"></svg>

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.

If you have further questions, visit the project’s Slack channel: #stacks.

Icon set

@Svg.Achievements

@Svg.AchievementsLg

@Svg.AchievementsSm

@Svg.Alert

@Svg.AlertCircle

@Svg.AlertCircleSm

@Svg.AlertSm

@Svg.Answer

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

@Svg.Coins

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

@Svg.Industry

@Svg.Info

@Svg.InfoSm

@Svg.Instagram

@Svg.International

@Svg.Italic

@Svg.Jira

@Svg.KeySmall

@Svg.Laptop

@Svg.LaunchPad

@Svg.Lightbulb

@Svg.LightbulbSm

@Svg.Link

@Svg.LinkedIn

@Svg.Location

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

@Svg.Medal

@Svg.Merge

@Svg.Message

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

@Svg.Refresh

@Svg.RefreshSm

@Svg.Relocation

@Svg.Remote

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

@Svg.SpeechBubbleRightStarSm

@Svg.SpeechBubbleSm

@Svg.StackExchange

@Svg.Star

@Svg.Strikethrough

@Svg.Stroller

@Svg.Subway

@Svg.Sync

@Svg.TIL

@Svg.Table

@Svg.Tack

@Svg.Tada

@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