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>