Icons
SVG Icons in HTML
This page contains a list of all SVG icons available and utility classes to support them. Not included are Brand Logos or Badges.
SVG
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 g
tags
, masks
, or nested paths
present as these unnecessarily increase file size.
SVG Format Guidelines
fill=currentColor
is setviewBox="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
g
tags
,masks
, ornested paths
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" class="icon-cog">
<path fill="currentColor" d="M346.382,250.246A96.882,96.882,0,1,0,249.5,347.128,96.992,96.992,0,0,0,346.382,250.246Zm93.428,35.383,42.96,24.8a12.121,12.121,0,0,1,5.5,14.1,249.617,249.617,0,0,1-55.13,95.348,12.113,12.113,0,0,1-14.952,2.273l-42.927-24.794a193.113,193.113,0,0,1-61.249,35.413v49.579a12.1,12.1,0,0,1-9.453,11.812,251.979,251.979,0,0,1-110.1.008,12.123,12.123,0,0,1-9.479-11.818V432.764a193.083,193.083,0,0,1-61.249-35.413L80.808,422.145a12.113,12.113,0,0,1-14.952-2.273,249.63,249.63,0,0,1-55.13-95.348,12.122,12.122,0,0,1,5.5-14.1l42.961-24.8a195.04,195.04,0,0,1,0-70.765l-42.96-24.8a12.121,12.121,0,0,1-5.5-14.1A249.621,249.621,0,0,1,65.857,80.62a12.113,12.113,0,0,1,14.952-2.272l42.927,24.793a193.131,193.131,0,0,1,61.249-35.413V18.149a12.108,12.108,0,0,1,9.453-11.813,252,252,0,0,1,110.1-.007,12.121,12.121,0,0,1,9.479,11.817V67.727a193.1,193.1,0,0,1,61.249,35.413l42.927-24.793a12.113,12.113,0,0,1,14.952,2.272,249.634,249.634,0,0,1,55.13,95.349,12.122,12.122,0,0,1-5.5,14.1l-42.961,24.8A195.045,195.045,0,0,1,439.81,285.629Z"/>
</svg>
Manipulating SVG
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.
Modify Class
Apply .icon
, .icon-sm
, and .icon-lg
to size icons directly.
<div class="row row-cols-4 align-items-center">
<svg class="icon-sm">
<use xlink:href="#close_circle" />
</svg>
<svg class="icon">
<use xlink:href="#close_circle" />
</svg>
<svg class="icon-lg">
<use xlink:href="#close_circle" />
</svg>
</div>
Color
Setting 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.
<div class="row row-cols-4 color-ignite">
<svg class="icon">
<use xlink:href="#close_circle" />
</svg>
<svg class="icon color-500">
<use xlink:href="#close_circle" />
</svg>
<svg class="bg-black icon color-100">
<use xlink:href="#close_circle" />
</svg>
</div>
Non-FLO Brand Colors
The following brand-specific color classes are provided:
class="color-amex"
class="color-android"
class="color-apple"
class="color-discover"
class="color-visa"
class="color-fire-tv"
class="color-outlook"
class="color-roku"
Transform
Transform icons with transform utilities
<div class="row row-cols-4">
<svg class="icon-md rotate-180">
<use xlink:href="#bell_regular" />
</svg>
<svg class="icon-md rotate-45">
<use xlink:href="#bell_regular" />
</svg>
<svg class="icon-md rotate-135">
<use xlink:href="#bell_regular" />
</svg>
</div>
Icon List
A complete list of all the SVG icons in the system.
android_flo_tomahawk
android_logo
android_logo_stacked
apple_logo
apple_tv_logo
back_10
bell_regular
bell_solid
calendar_alt
cc_amex
cc_discover
cc_default
cc_mastercard
cc_visa
check
checklist_no
checklist_yes
check_circle_outline
chevron
chevron_down
chevron_right
chevron_up
close
close_circle
close_circle_outline
close_x_mark
cog
cog_hd
collapse
expand
external_link
equalizer
filters
fire_tv_logo
flo_hawk
flosports_logo
forward_10
google_logo
ios_logo
info_circle
info_circle_solid
left_arrow
location
location_blocked
lock
menu_hamburger
mic
mic_mute
minus
minus_outline
minus_circle_outline
outlook_logo
plus
plus_circle_outline
plus_outline
right_arrow
roku_logo
search
share
streaming
tv
user
vid_2up_active
vid_2up_inactive
vid_4up_active
vid_4up_inactive
vid_pause
vid_pause_outline
vid_pip_active
vid_pip_inactive
vid_play
vid_play_icon
vid_play_icon_outline
vid_single_active
vid_single_inactive
volume_high
volume_low
volume_medium
volume_mute
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