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 set
  • 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 g tags, masks, or nested 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