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

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

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

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

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

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="Wave" class="fc-orange float-right js-dropdown-target"></svg>

Spot illustrations

@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.Badge
@Svg.Spot.BadgeLg
@Svg.Spot.BadgeXL
@Svg.Spot.Bell
@Svg.Spot.BellLg
@Svg.Spot.BellXL
@Svg.Spot.Bullhorn
@Svg.Spot.BullhornLg
@Svg.Spot.BullhornXL
@Svg.Spot.Clock
@Svg.Spot.ClockLg
@Svg.Spot.ClockXL
@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.Gauge
@Svg.Spot.GaugeLg
@Svg.Spot.GaugeXL
@Svg.Spot.Gear
@Svg.Spot.GearLg
@Svg.Spot.GearXL
@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.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.Network
@Svg.Spot.NetworkLg
@Svg.Spot.NetworkXL
@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.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.StarLg
@Svg.Spot.StarXL
@Svg.Spot.Tada
@Svg.Spot.TadaLg
@Svg.Spot.TadaXL
@Svg.Spot.TechnicalWriting
@Svg.Spot.TechnicalWritingLg
@Svg.Spot.TechnicalWritingXL
@Svg.Spot.Theme
@Svg.Spot.ThemeLg
@Svg.Spot.ThemeXL
@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