Skip to content


Beautiful Canoe uses icons, version 5 or above.


The free Font Awesome set is licensed by the CC By 4.0 License.

Load icons

To load Font Awesome icons, include the following in the <head> of your HTML page:

<!-- Latest Font Awesome kit. -->
<script src=""></script>

Styling icons

Icons should be styled in the primary brand colour, similarly to this:

.icon-container {
    font-size: 2em;
    display: flex;
    text-align: center;
    vertical-align: middle;

i.fas {
    color: $primary;
    height: 2em;
    width: 2em;
    padding: 5px;
    margin: 5px;
    line-height: inherit;

i.fas:hover {
    background: $primary;
    color: $white;

Using an icon in HTML

<div class="icon-container">
    <i class="fas fa-ICON-NAME fa-1x" title="TITLE"></i>

Value and attitude icons

The standard set of icons for the Beautiful Canoe attitudes and values can be viewed / downloaded from the Font Awesome site: