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 helper

The SVG Razor helper function should be used for all system icons in lieu of SVG sprite sheets or raster image assets. This ensures a single source of truth for all icons. The SVG helper is invoked by @Svg. and then adding the icon name, like so:

<div class="example">
  @Svg.Search
</div>

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.

<div class="example">
  @Svg.Logo.With("native")
</div>

In fact, our helper supports arbitrary classes as well.

<div class="example">
  @Svg.Logo.With("native js-dropdown-target another-class-name")
</div>

Note: Our @Svg helper isn’t available within our documentation. You can call SVGs using our custom Icon liquid tag: {% icon Search | optional additional classes | pixel dimension %}

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.AchievementsSm

@Svg.Alert

@Svg.AlertCircle

@Svg.AlertCircleSm

@Svg.AlertSm

@Svg.Answer

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

@Svg.Book

@Svg.Briefcase

@Svg.BriefcaseSm

@Svg.Calendar

@Svg.Chair

@Svg.Checkmark

@Svg.CheckmarkLg

@Svg.CheckmarkSm

@Svg.Clear

@Svg.ClearSm

@Svg.Clock

@Svg.Code

@Svg.Columns

@Svg.Computer

@Svg.Copy

@Svg.CreditCard

@Svg.DevTo

@Svg.Document

@Svg.Download

@Svg.DownloadSm

@Svg.Dropbox

@Svg.EllipsisHorizontal

@Svg.EllipsisVertical

@Svg.Eye

@Svg.EyeOff

@Svg.FaceFrown

@Svg.FaceJoy

@Svg.FaceNeutral

@Svg.FaceSad

@Svg.FaceSmile

@Svg.Facebook

@Svg.Female

@Svg.Fire

@Svg.FireSm

@Svg.Fitness

@Svg.Flag

@Svg.FlagSm

@Svg.Food

@Svg.Gear

@Svg.GearSm

@Svg.GitHub

@Svg.GitLab

@Svg.Globe

@Svg.Google

@Svg.GoogleDrive

@Svg.Grabber

@Svg.Graph

@Svg.Grid

@Svg.Hamburger

@Svg.Header

@Svg.Health

@Svg.Heart

@Svg.Help

@Svg.HelpSm

@Svg.History

@Svg.Home

@Svg.HorizontalRule

@Svg.Image

@Svg.Inbox

@Svg.Industry

@Svg.Info

@Svg.InfoSm

@Svg.International

@Svg.Italic

@Svg.KeySmall

@Svg.Laptop

@Svg.LaunchPad

@Svg.Lightbulb

@Svg.Link

@Svg.LinkedIn

@Svg.Location

@Svg.Lock

@Svg.Logo

@Svg.LogoEnterprise

@Svg.LogoEnterpriseWordmarkSm

@Svg.LogoGlyph

@Svg.LogoGlyphMd

@Svg.LogoGlyphSm

@Svg.LogoGlyphXSm

@Svg.LogoGlyphXxs

@Svg.LogoMd

@Svg.LogoSE

@Svg.LogoSEAlternativeSm

@Svg.LogoSEGlyphMd

@Svg.LogoSEXxs

@Svg.LogoSm

@Svg.LogoTalent

@Svg.LogoTeams

@Svg.LogoTeamsAlt

@Svg.LogoTeamsAltMd

@Svg.LogoWordmark

@Svg.LogoWordmarkMd

@Svg.LogoWordmarkSm

@Svg.Mail

@Svg.Medal

@Svg.Merge

@Svg.Message

@Svg.Microsoft

@Svg.Migrate

@Svg.Milestone

@Svg.Minus

@Svg.MinusSm

@Svg.Moderator

@Svg.ModeratorSm

@Svg.Money

@Svg.NotInterested

@Svg.OpenSource

@Svg.OrderedList

@Svg.Paperclip

@Svg.Peak

@Svg.Pencil

@Svg.PencilSm

@Svg.People

@Svg.Person

@Svg.Phone

@Svg.Plus

@Svg.PlusSm

@Svg.PromoteDemote

@Svg.Question

@Svg.Quote

@Svg.Refresh

@Svg.RefreshSm

@Svg.Relocation

@Svg.Remote

@Svg.ReviewQueue

@Svg.Rss

@Svg.School

@Svg.Search

@Svg.SearchSm

@Svg.Share

@Svg.ShareSm

@Svg.Shield

@Svg.ShieldSm

@Svg.ShieldXSm

@Svg.Slack

@Svg.SmartPhone

@Svg.SpeechBubble

@Svg.SpeechBubbleError

@Svg.SpeechBubbleSm

@Svg.StackExchange

@Svg.Star

@Svg.Stroller

@Svg.Subway

@Svg.Sync

@Svg.Tack

@Svg.ThumbsDown

@Svg.ThumbsUp

@Svg.Tool

@Svg.Trash

@Svg.TrashSm

@Svg.TrendingDown

@Svg.TrendingNone

@Svg.TrendingUp

@Svg.Twitter

@Svg.Undo

@Svg.UndoSm

@Svg.UnorderedList

@Svg.VK

@Svg.Vacation

@Svg.Wave

@Svg.Yandex