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.
Six sizing classes are available for SVGs.
svg-1
svg-2
svg-3
svg-4
svg-5
svg-6
Style the fill
attribute of SVG icons by applying SVG fill color classes directly to the parent svg
.
svg-red
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.