SVG Icons in HTML
Each icon in the Flo-SCSS system is a formatted SVG with a
viewBox="0 0 500 500", a path fill=”currentColor” and a descriptive class name.
The SVG is created on a 500px x 500px art board in a design program such as Adobe Illustrator or Sketch and cleaned up with a svgomg. When using SVG, make sure there are no extra
nested paths present as these unnecessarily increase file size.
SVG Format Guidelines
viewBox="0 0 500 500"is present
- no inline width, height, or colors
- use of classes to reference the SVG
- the svg is flat with only a path tag. No
Note: These examples below uses Flo-SCSS's SVG sprite sheet and may not reflect how your application references SVG. The names of the SVG icons should remain the same.
.icon-lg to size icons directly.
fill=currentColor in the SVG allows the SVG colors to be controlled by CSS. Below you can see the SVG color changing by adding
.color-class to the SVG or parent tag.
Non-FLO Brand Colors
The following brand-specific color classes are provided:
Transform icons with transform utilities
A complete list of all the SVG icons in the system.
Adding an SVG to the Flo-SCSS Sprite Sheet
FLO-SCSS svg icons are displayed in a grid list generated using
svg-sprite, is a module that takes a bunch of SVG files, optimizes them and puts them all into one svg sprite which is located here,
_includes/icon-sprite.svg, in this app. with their names referenced in
site/_data/icons.yml. The “All icons” section of icons.md loops through these names to presents the full svg list.
To add or remove an svg, update the name in the
icons.yml and run
npm run process-svg