Sections

Spot illustrations

Spot illustrations are the slightly grown up version of icons with a little more detail. They’re most often used in empty states and new product announcements. They’re built externally on the Icons repository.

Using the spots helpers

Section titled Using the spots helpers

Just like icons, spot illustrations 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 spot illustrations in lieu of SVG sprite sheets or static raster image assets. This ensures a single source of truth for all spot illustrations.

Basic

Section titled Basic

<!-- Razor -->
@Svg.Spot.Wave

<!-- Liquid -->
{% spot "Wave" %}

<!-- JavaScript Helper -->
<svg data-spot="SpotWave"></svg>

Arbitrary classes

Section titled Arbitrary classes

Spot illustrations can be colored on the fly with support for arbitrary classes.

<!-- Razor -->
@Svg.Spot.Wave.With("fc-orange-400 float-right js-dropdown-target")

<!-- Liquid -->
{% spot "Wave", "fc-orange-400 float-right js-dropdown-target" %}

<!-- JavaScript Helper -->
<svg data-spot="SpotWave" class="fc-orange-400 float-right js-dropdown-target"></svg>

Spot illustrations

Section titled Spot illustrations

@Svg.Spot.Ads Ads spot

@Svg.Spot.AdsLg AdsLg spot

@Svg.Spot.AdsXL AdsXL spot

@Svg.Spot.Alert Alert spot

@Svg.Spot.AlertCircle AlertCircle spot

@Svg.Spot.AlertCircleLg AlertCircleLg spot

@Svg.Spot.AlertCircleXL AlertCircleXL spot

@Svg.Spot.AlertLg AlertLg spot

@Svg.Spot.AlertXL AlertXL spot

@Svg.Spot.Answer Answer spot

@Svg.Spot.AnswerLg AnswerLg spot

@Svg.Spot.AnswerXL AnswerXL spot

@Svg.Spot.Approve Approve spot

@Svg.Spot.ApproveLg ApproveLg spot

@Svg.Spot.ApproveXL ApproveXL spot

@Svg.Spot.Astronaut Astronaut spot

@Svg.Spot.AstronautLg AstronautLg spot

@Svg.Spot.AstronautXL AstronautXL spot

@Svg.Spot.Award Award spot

@Svg.Spot.AwardLg AwardLg spot

@Svg.Spot.AwardXL AwardXL spot

@Svg.Spot.Badge Badge spot

@Svg.Spot.BadgeLg BadgeLg spot

@Svg.Spot.BadgeXL BadgeXL spot

@Svg.Spot.Bell Bell spot

@Svg.Spot.BellLg BellLg spot

@Svg.Spot.BellXL BellXL spot

@Svg.Spot.Bookmark Bookmark spot

@Svg.Spot.BookmarkAdd BookmarkAdd spot

@Svg.Spot.BookmarkAddLg BookmarkAddLg spot

@Svg.Spot.BookmarkAddXL BookmarkAddXL spot

@Svg.Spot.BookmarkLg BookmarkLg spot

@Svg.Spot.BookmarkXL BookmarkXL spot

@Svg.Spot.Bullhorn Bullhorn spot

@Svg.Spot.BullhornLg BullhornLg spot

@Svg.Spot.BullhornXL BullhornXL spot

@Svg.Spot.Calendar Calendar spot

@Svg.Spot.CalendarLg CalendarLg spot

@Svg.Spot.CalendarXL CalendarXL spot

@Svg.Spot.Checklist Checklist spot

@Svg.Spot.ChecklistLg ChecklistLg spot

@Svg.Spot.ChecklistXL ChecklistXL spot

@Svg.Spot.Clock Clock spot

@Svg.Spot.ClockLg ClockLg spot

@Svg.Spot.ClockXL ClockXL spot

@Svg.Spot.Collection Collection spot

@Svg.Spot.CollectionLg CollectionLg spot

@Svg.Spot.CollectionXL CollectionXL spot

@Svg.Spot.Collective Collective spot

@Svg.Spot.CollectiveLg CollectiveLg spot

@Svg.Spot.CollectiveXL CollectiveXL spot

@Svg.Spot.Compass Compass spot

@Svg.Spot.CompassLg CompassLg spot

@Svg.Spot.CompassXL CompassXL spot

@Svg.Spot.DocumentAlt DocumentAlt spot

@Svg.Spot.DocumentAltLg DocumentAltLg spot

@Svg.Spot.DocumentAltXL DocumentAltXL spot

@Svg.Spot.Empty Empty spot

@Svg.Spot.EmptyLg EmptyLg spot

@Svg.Spot.EmptyXL EmptyXL spot

@Svg.Spot.Expire Expire spot

@Svg.Spot.ExpireLg ExpireLg spot

@Svg.Spot.ExpireXL ExpireXL spot

@Svg.Spot.Fire Fire spot

@Svg.Spot.FireLg FireLg spot

@Svg.Spot.FireXL FireXL spot

@Svg.Spot.Focus Focus spot

@Svg.Spot.FocusLg FocusLg spot

@Svg.Spot.FocusXL FocusXL spot

@Svg.Spot.ForYou ForYou spot

@Svg.Spot.ForYouLg ForYouLg spot

@Svg.Spot.ForYouXL ForYouXL spot

@Svg.Spot.Four Four spot

@Svg.Spot.Gauge Gauge spot

@Svg.Spot.GaugeLg GaugeLg spot

@Svg.Spot.GaugeXL GaugeXL spot

@Svg.Spot.Gear Gear spot

@Svg.Spot.GearLg GearLg spot

@Svg.Spot.GearXL GearXL spot

@Svg.Spot.Globe Globe spot

@Svg.Spot.GlobeLg GlobeLg spot

@Svg.Spot.GlobeXL GlobeXL spot

@Svg.Spot.Headset Headset spot

@Svg.Spot.HeadsetLg HeadsetLg spot

@Svg.Spot.HeadsetXL HeadsetXL spot

@Svg.Spot.Health Health spot

@Svg.Spot.HealthLg HealthLg spot

@Svg.Spot.HealthXL HealthXL spot

@Svg.Spot.Heart Heart spot

@Svg.Spot.HeartLg HeartLg spot

@Svg.Spot.HeartXL HeartXL spot

@Svg.Spot.Identity Identity spot

@Svg.Spot.IdentityLg IdentityLg spot

@Svg.Spot.IdentityXL IdentityXL spot

@Svg.Spot.Image Image spot

@Svg.Spot.ImageLg ImageLg spot

@Svg.Spot.ImageXL ImageXL spot

@Svg.Spot.Inspect Inspect spot

@Svg.Spot.InspectLg InspectLg spot

@Svg.Spot.InspectXL InspectXL spot

@Svg.Spot.JobListings JobListings spot

@Svg.Spot.JobListingsLg JobListingsLg spot

@Svg.Spot.JobListingsXL JobListingsXL spot

@Svg.Spot.JobSearch JobSearch spot

@Svg.Spot.JobSearchLg JobSearchLg spot

@Svg.Spot.JobSearchXL JobSearchXL spot

@Svg.Spot.Key Key spot

@Svg.Spot.KeyLg KeyLg spot

@Svg.Spot.KeyXL KeyXL spot

@Svg.Spot.Lightbulb Lightbulb spot

@Svg.Spot.LightbulbLg LightbulbLg spot

@Svg.Spot.LightbulbXL LightbulbXL spot

@Svg.Spot.Location Location spot

@Svg.Spot.LocationLg LocationLg spot

@Svg.Spot.LocationXL LocationXL spot

@Svg.Spot.Lock Lock spot

@Svg.Spot.LockLg LockLg spot

@Svg.Spot.LockXL LockXL spot

@Svg.Spot.Magnet Magnet spot

@Svg.Spot.MagnetLg MagnetLg spot

@Svg.Spot.MagnetXL MagnetXL spot

@Svg.Spot.Mail Mail spot

@Svg.Spot.MailLg MailLg spot

@Svg.Spot.MailXL MailXL spot

@Svg.Spot.Mention Mention spot

@Svg.Spot.MentionLg MentionLg spot

@Svg.Spot.MentionXL MentionXL spot

@Svg.Spot.Metrics Metrics spot

@Svg.Spot.MetricsLg MetricsLg spot

@Svg.Spot.MetricsXL MetricsXL spot

@Svg.Spot.Network Network spot

@Svg.Spot.NetworkLg NetworkLg spot

@Svg.Spot.NetworkXL NetworkXL spot

@Svg.Spot.One One spot

@Svg.Spot.Page Page spot

@Svg.Spot.PageLg PageLg spot

@Svg.Spot.PageXL PageXL spot

@Svg.Spot.Pencil Pencil spot

@Svg.Spot.PencilLg PencilLg spot

@Svg.Spot.PencilXL PencilXL spot

@Svg.Spot.People People spot

@Svg.Spot.PeopleLg PeopleLg spot

@Svg.Spot.PeopleXL PeopleXL spot

@Svg.Spot.PersonVerified PersonVerified spot

@Svg.Spot.PersonVerifiedLg PersonVerifiedLg spot

@Svg.Spot.PersonVerifiedXL PersonVerifiedXL spot

@Svg.Spot.Placeholder Placeholder spot

@Svg.Spot.PlaceholderLg PlaceholderLg spot

@Svg.Spot.PlaceholderXL PlaceholderXL spot

@Svg.Spot.Play Play spot

@Svg.Spot.PlayLg PlayLg spot

@Svg.Spot.PlayXL PlayXL spot

@Svg.Spot.Puzzle Puzzle spot

@Svg.Spot.PuzzleAlt PuzzleAlt spot

@Svg.Spot.PuzzleAltLg PuzzleAltLg spot

@Svg.Spot.PuzzleAltXL PuzzleAltXL spot

@Svg.Spot.PuzzleLg PuzzleLg spot

@Svg.Spot.PuzzleXL PuzzleXL spot

@Svg.Spot.Question Question spot

@Svg.Spot.QuestionLg QuestionLg spot

@Svg.Spot.QuestionXL QuestionXL spot

@Svg.Spot.Quote Quote spot

@Svg.Spot.QuoteLg QuoteLg spot

@Svg.Spot.QuoteXL QuoteXL spot

@Svg.Spot.Refresh Refresh spot

@Svg.Spot.RefreshLg RefreshLg spot

@Svg.Spot.RefreshXL RefreshXL spot

@Svg.Spot.Reputation Reputation spot

@Svg.Spot.ReputationLg ReputationLg spot

@Svg.Spot.ReputationXL ReputationXL spot

@Svg.Spot.Rocket Rocket spot

@Svg.Spot.RocketLg RocketLg spot

@Svg.Spot.RocketXL RocketXL spot

@Svg.Spot.School School spot

@Svg.Spot.SchoolLg SchoolLg spot

@Svg.Spot.SchoolXL SchoolXL spot

@Svg.Spot.Search Search spot

@Svg.Spot.SearchLg SearchLg spot

@Svg.Spot.SearchXL SearchXL spot

@Svg.Spot.Star Star spot

@Svg.Spot.StarBadge StarBadge spot

@Svg.Spot.StarBadgeLg StarBadgeLg spot

@Svg.Spot.StarBadgeXL StarBadgeXL spot

@Svg.Spot.StarBubble StarBubble spot

@Svg.Spot.StarBubbleLg StarBubbleLg spot

@Svg.Spot.StarBubbleXL StarBubbleXL spot

@Svg.Spot.StarLg StarLg spot

@Svg.Spot.StarXL StarXL spot

@Svg.Spot.Tada Tada spot

@Svg.Spot.TadaLg TadaLg spot

@Svg.Spot.TadaXL TadaXL spot

@Svg.Spot.Tags Tags spot

@Svg.Spot.TagsLg TagsLg spot

@Svg.Spot.TagsXL TagsXL spot

@Svg.Spot.Target Target spot

@Svg.Spot.TargetLg TargetLg spot

@Svg.Spot.TargetXL TargetXL spot

@Svg.Spot.TechnicalWriting TechnicalWriting spot

@Svg.Spot.TechnicalWritingLg TechnicalWritingLg spot

@Svg.Spot.TechnicalWritingXL TechnicalWritingXL spot

@Svg.Spot.Theme Theme spot

@Svg.Spot.ThemeLg ThemeLg spot

@Svg.Spot.ThemeXL ThemeXL spot

@Svg.Spot.Three Three spot

@Svg.Spot.Trophy Trophy spot

@Svg.Spot.TrophyLg TrophyLg spot

@Svg.Spot.TrophyXL TrophyXL spot

@Svg.Spot.Two Two spot

@Svg.Spot.Unlock Unlock spot

@Svg.Spot.UnlockLg UnlockLg spot

@Svg.Spot.UnlockXL UnlockXL spot

@Svg.Spot.UserAdd UserAdd spot

@Svg.Spot.UserAddLg UserAddLg spot

@Svg.Spot.UserAddXL UserAddXL spot

@Svg.Spot.Wave Wave spot

@Svg.Spot.WaveLg WaveLg spot

@Svg.Spot.WaveXL WaveXL spot

Deploys by Netlify