Skip to main content

Spot illustrations

Razor
Figma

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.

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.

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

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

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

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