SVG Icons

Icon Set

Our SVG icon set can be accessed by BuzzFeed employees in the Solid icon repo. We inline all of our SVGs for performance and accessibility reasons, which you can read more about here.

Sizing

Six sizing classes are available for SVGs.

Viral Arrow .svg-1
Viral Arrow .svg-2
Viral Arrow .svg-3
Viral Arrow .svg-4
Viral Arrow .svg-5
Viral Arrow .svg-6 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" class="svg-6">
  <title>Viral Arrow</title>
  <path/>
</svg>

Fill Color

Style the fill attribute of SVG icons by applying SVG fill color classes directly to the parent svg.

Viral Arrow .svg-red 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" class="svg-3 svg-red">
  <title>Viral Arrow</title>
  <path/>
</svg>

Accessibility

Accessibility should be considered in all usage of SVG icons. Each icon should include a meaningful title, customized for context. Their unique application will determine the appropriate treatments, covered here by CSS Tricks in more detail. Additionally, a screenreader shouldn't read the icon if only acts as decoration for a static text label. To avoid redundancy, add aria-hidden="true" to the svg element.

Post was published successfully. 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" class="svg-4 svg-green" aria-hidden="true"> 
  <title>Success</title>
  <path/>
</svg> 
<span class="xs-text-4 text-green">Post was published successfully.</span>