SVG Icons

  1. Home
  2. Features
  3. SVG Icons

These are the SVG icons this version uses, grouped by file. Click "Copy" to copy the code of an icon, then paste it into your page.

icons-soccer.svg

File: assets/images/icons-soccer.svg. The df-icon classes in the CSS set the size and color of each icon.

whistle
<svg role="img" class="df-icon df-icon--whistle"><use xlink:href="assets/images/icons-soccer.svg#whistle"/></svg>
soccer-ball
<svg role="img" class="df-icon df-icon--soccer-ball"><use xlink:href="assets/images/icons-soccer.svg#soccer-ball"/></svg>

sprite.svg

CSS sprite icons: add the classes to any element. They are made from the SVG files in assets/images/sprites/. After you add or change one of those files, run gulp sprites.

arrow-board
<span class="icon-svg icon-arrow-board"></span>
calendar
<span class="icon-svg icon-calendar"></span>
corner-flag
<span class="icon-svg icon-corner-flag"></span>
crosshair
<span class="icon-svg icon-crosshair"></span>
in
<span class="icon-svg icon-in"></span>
injury
<span class="icon-svg icon-injury"></span>
keepers-glove
<span class="icon-svg icon-keepers-glove"></span>
map-pin
<span class="icon-svg icon-map-pin"></span>
offside-flag
<span class="icon-svg icon-offside-flag"></span>
out
<span class="icon-svg icon-out"></span>
person
<span class="icon-svg icon-person"></span>
red-card
<span class="icon-svg icon-red-card"></span>
shirt
<span class="icon-svg icon-shirt"></span>
shirt-alt
<span class="icon-svg icon-shirt-alt"></span>
smile
<span class="icon-svg icon-smile"></span>
soccer-ball
<span class="icon-svg icon-soccer-ball"></span>
soccer-ball-missed-penalty
<span class="icon-svg icon-soccer-ball-missed-penalty"></span>
soccer-ball-own-goal
<span class="icon-svg icon-soccer-ball-own-goal"></span>
soccer-ball-penalty
<span class="icon-svg icon-soccer-ball-penalty"></span>
soccer-gate
<span class="icon-svg icon-soccer-gate"></span>
soccer-shoe
<span class="icon-svg icon-soccer-shoe"></span>
soccer-shots
<span class="icon-svg icon-soccer-shots"></span>
stopwatch
<span class="icon-svg icon-stopwatch"></span>
substitution
<span class="icon-svg icon-substitution"></span>
trophy
<span class="icon-svg icon-trophy"></span>
trophy-new
<span class="icon-svg icon-trophy-new"></span>
whistle
<span class="icon-svg icon-whistle"></span>
yellow-card
<span class="icon-svg icon-yellow-card"></span>

icons-basket.svg

File: assets/images/icons-basket.svg. The df-icon classes in the CSS set the size and color of each icon.

basketball
<svg role="img" class="df-icon df-icon--basketball"><use xlink:href="assets/images/icons-basket.svg#basketball"/></svg>
jersey
<svg role="img" class="df-icon df-icon--jersey"><use xlink:href="assets/images/icons-basket.svg#jersey"/></svg>
bag
<svg role="img" class="df-icon df-icon--bag"><use xlink:href="assets/images/icons-basket.svg#bag"/></svg>
bag-handle
<svg role="img" class="df-icon df-icon--bag-handle"><use xlink:href="assets/images/icons-basket.svg#bag-handle"/></svg>
points-per-game
<svg role="img" class="df-icon df-icon--points-per-game"><use xlink:href="assets/images/icons-basket.svg#points-per-game"/></svg>
assists-per-game
<svg role="img" class="df-icon df-icon--assists-per-game"><use xlink:href="assets/images/icons-basket.svg#assists-per-game"/></svg>
rebounds-per-game
<svg role="img" class="df-icon df-icon--rebounds-per-game"><use xlink:href="assets/images/icons-basket.svg#rebounds-per-game"/></svg>
map-pin-o
<svg role="img" class="df-icon df-icon--map-pin-o"><use xlink:href="assets/images/icons-basket.svg#map-pin-o"/></svg>
trophy-o
<svg role="img" class="df-icon df-icon--trophy-o"><use xlink:href="assets/images/icons-basket.svg#trophy-o"/></svg>
calendar-o
<svg role="img" class="df-icon df-icon--calendar-o"><use xlink:href="assets/images/icons-basket.svg#calendar-o"/></svg>
whistle-o
<svg role="img" class="df-icon df-icon--whistle-o"><use xlink:href="assets/images/icons-basket.svg#whistle-o"/></svg>
person-o
<svg role="img" class="df-icon df-icon--person-o"><use xlink:href="assets/images/icons-basket.svg#person-o"/></svg>

icons.svg

File: assets/images/icons.svg. The df-icon classes in the CSS set the size and color of each icon.

trophy
<svg role="img" class="df-icon df-icon--trophy"><use xlink:href="assets/images/icons.svg#trophy"/></svg>