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.

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="Wave"></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="Wave" class="fc-orange float-right js-dropdown-target"></svg>
@Svg.Spot.Ads
@Svg.Spot.AdsLg
@Svg.Spot.AdsXL
@Svg.Spot.Alert
@Svg.Spot.AlertCircle
@Svg.Spot.AlertCircleLg
@Svg.Spot.AlertCircleXL
@Svg.Spot.AlertLg
@Svg.Spot.AlertXL
@Svg.Spot.Answer
@Svg.Spot.AnswerLg
@Svg.Spot.AnswerXL
@Svg.Spot.Approve
@Svg.Spot.ApproveLg
@Svg.Spot.ApproveXL
@Svg.Spot.Astronaut
@Svg.Spot.AstronautLg
@Svg.Spot.AstronautXL
@Svg.Spot.Award
@Svg.Spot.AwardLg
@Svg.Spot.AwardXL
@Svg.Spot.Badge
@Svg.Spot.BadgeLg
@Svg.Spot.BadgeXL
@Svg.Spot.Bell
@Svg.Spot.BellLg
@Svg.Spot.BellXL
@Svg.Spot.Bookmark
@Svg.Spot.BookmarkLg
@Svg.Spot.BookmarkXL
@Svg.Spot.Bullhorn
@Svg.Spot.BullhornLg
@Svg.Spot.BullhornXL
@Svg.Spot.Calendar
@Svg.Spot.CalendarLg
@Svg.Spot.CalendarXL
@Svg.Spot.Checklist
@Svg.Spot.ChecklistLg
@Svg.Spot.ChecklistXL
@Svg.Spot.Clock
@Svg.Spot.ClockLg
@Svg.Spot.ClockXL
@Svg.Spot.Collection
@Svg.Spot.CollectionLg
@Svg.Spot.CollectionXL
@Svg.Spot.Collective
@Svg.Spot.CollectiveLg
@Svg.Spot.CollectiveXL
@Svg.Spot.Compass
@Svg.Spot.CompassLg
@Svg.Spot.CompassXL
@Svg.Spot.DocumentAlt
@Svg.Spot.DocumentAltLg
@Svg.Spot.DocumentAltXL
@Svg.Spot.Empty
@Svg.Spot.EmptyLg
@Svg.Spot.EmptyXL
@Svg.Spot.Expire
@Svg.Spot.ExpireLg
@Svg.Spot.ExpireXL
@Svg.Spot.Fire
@Svg.Spot.FireLg
@Svg.Spot.FireXL
@Svg.Spot.Focus
@Svg.Spot.FocusLg
@Svg.Spot.FocusXL
@Svg.Spot.ForYou
@Svg.Spot.ForYouLg
@Svg.Spot.ForYouXL
@Svg.Spot.Four
@Svg.Spot.Gauge
@Svg.Spot.GaugeLg
@Svg.Spot.GaugeXL
@Svg.Spot.Gear
@Svg.Spot.GearLg
@Svg.Spot.GearXL
@Svg.Spot.Globe
@Svg.Spot.GlobeLg
@Svg.Spot.GlobeXL
@Svg.Spot.Headset
@Svg.Spot.HeadsetLg
@Svg.Spot.HeadsetXL
@Svg.Spot.Heart
@Svg.Spot.HeartLg
@Svg.Spot.HeartXL
@Svg.Spot.Identity
@Svg.Spot.IdentityLg
@Svg.Spot.IdentityXL
@Svg.Spot.Image
@Svg.Spot.ImageLg
@Svg.Spot.ImageXL
@Svg.Spot.Inspect
@Svg.Spot.InspectLg
@Svg.Spot.InspectXL
@Svg.Spot.JobListings
@Svg.Spot.JobListingsLg
@Svg.Spot.JobListingsXL
@Svg.Spot.JobSearch
@Svg.Spot.JobSearchLg
@Svg.Spot.JobSearchXL
@Svg.Spot.Key
@Svg.Spot.KeyLg
@Svg.Spot.KeyXL
@Svg.Spot.Lightbulb
@Svg.Spot.LightbulbLg
@Svg.Spot.LightbulbXL
@Svg.Spot.Location
@Svg.Spot.LocationLg
@Svg.Spot.LocationXL
@Svg.Spot.Lock
@Svg.Spot.LockLg
@Svg.Spot.LockXL
@Svg.Spot.Magnet
@Svg.Spot.MagnetLg
@Svg.Spot.MagnetXL
@Svg.Spot.Mail
@Svg.Spot.MailLg
@Svg.Spot.MailXL
@Svg.Spot.Mention
@Svg.Spot.MentionLg
@Svg.Spot.MentionXL
@Svg.Spot.Metrics
@Svg.Spot.MetricsLg
@Svg.Spot.MetricsXL
@Svg.Spot.Network
@Svg.Spot.NetworkLg
@Svg.Spot.NetworkXL
@Svg.Spot.One
@Svg.Spot.Page
@Svg.Spot.PageLg
@Svg.Spot.PageXL
@Svg.Spot.Pencil
@Svg.Spot.PencilLg
@Svg.Spot.PencilXL
@Svg.Spot.People
@Svg.Spot.PeopleLg
@Svg.Spot.PeopleXL
@Svg.Spot.PersonVerified
@Svg.Spot.PersonVerifiedLg
@Svg.Spot.PersonVerifiedXL
@Svg.Spot.Play
@Svg.Spot.PlayLg
@Svg.Spot.PlayXL
@Svg.Spot.Puzzle
@Svg.Spot.PuzzleAlt
@Svg.Spot.PuzzleAltLg
@Svg.Spot.PuzzleAltXL
@Svg.Spot.PuzzleLg
@Svg.Spot.PuzzleXL
@Svg.Spot.Question
@Svg.Spot.QuestionLg
@Svg.Spot.QuestionXL
@Svg.Spot.Quote
@Svg.Spot.QuoteLg
@Svg.Spot.QuoteXL
@Svg.Spot.Refresh
@Svg.Spot.RefreshLg
@Svg.Spot.RefreshXL
@Svg.Spot.Reputation
@Svg.Spot.ReputationLg
@Svg.Spot.ReputationXL
@Svg.Spot.Rocket
@Svg.Spot.RocketLg
@Svg.Spot.RocketXL
@Svg.Spot.School
@Svg.Spot.SchoolLg
@Svg.Spot.SchoolXL
@Svg.Spot.SearchLg
@Svg.Spot.SearchXL
@Svg.Spot.Star
@Svg.Spot.StarBadge
@Svg.Spot.StarBadgeLg
@Svg.Spot.StarBadgeXL
@Svg.Spot.StarBubble
@Svg.Spot.StarBubbleLg
@Svg.Spot.StarBubbleXL
@Svg.Spot.StarLg
@Svg.Spot.StarXL
@Svg.Spot.Tada
@Svg.Spot.TadaLg
@Svg.Spot.TadaXL
@Svg.Spot.Tags
@Svg.Spot.TagsLg
@Svg.Spot.TagsXL
@Svg.Spot.Target
@Svg.Spot.TargetLg
@Svg.Spot.TargetXL
@Svg.Spot.TechnicalWriting
@Svg.Spot.TechnicalWritingLg
@Svg.Spot.TechnicalWritingXL
@Svg.Spot.Theme
@Svg.Spot.ThemeLg
@Svg.Spot.ThemeXL
@Svg.Spot.Three
@Svg.Spot.Trophy
@Svg.Spot.TrophyLg
@Svg.Spot.TrophyXL
@Svg.Spot.Two
@Svg.Spot.Unlock
@Svg.Spot.UnlockLg
@Svg.Spot.UnlockXL
@Svg.Spot.UserAdd
@Svg.Spot.UserAddLg
@Svg.Spot.UserAddXL
@Svg.Spot.Wave
@Svg.Spot.WaveLg
@Svg.Spot.WaveXL