SVG sprite icon reference

Invoice Rocket utilises a custom SVG sprite for most of the iconography. Icons can be targeted using the standard SVG element…

<svg><use xlink:href="#dashboard"></use></svg>

…where the ID is the icon you wish to output. In the example above, the dashboard icon will be displayed.

These SVG sprites can also be filled with any colour. Again using the dashboard icon as an example, you can add a class to the SVG…

<svg class="dashboard"><use xlink:href="#dashboard"></use></svg>

…and then change its colour…

.dashboard {
fill: #ffcc33;
}

For reference, here is a complete list of icons utilised in the Invoice Rocket theme.


  • dashboard

  • search

  • invoice

  • mail

  • phone

  • mobile

  • client

  • trash

  • settings

  • logout

  • rocket

  • arrow

  • add

  • jump-pad

  • full-screen

  • paperclip

  • tick

  • calendar

  • calendar-clean

  • cash

  • paypal

  • credit-card

  • bank-transfer

  • cheque

  • other-payment-type

  • dots

  • report

  • filter

  • heart

  • external

  • pie-chart

  • details

  • tool

❮ Go back to Invoice Rocket FAQ & Guide

Discuss this