SVG Icons

Warning: You are currently browsing without javascript enabled.

‹ Back

SVG icons are stored in /app/views/shared/icons as _icon_name.svg.erb.

Icon Helper

There is a rails helper for using these SVG icons in your project:

<%= icon("search", width: 32, height: 32) -%>

You can pass in width and height attributes in to the helper to control the size of the icon:

<%= icon("search", width: 16, height: 16) -%>
<%= icon("search", width: 32, height: 32) -%>
<%= icon("search", width: 64, height: 64) -%>

You can control the colouring of the icon using the fill and stroke attributes:

<%= icon("search", width: 32, height: 32, stroke: "#cccccc") -%>
<%= icon("search", width: 32, height: 32, stroke: "red") -%>
<%= icon("search", width: 32, height: 32, stroke: "#ff00bb") -%>

Project Icons

This project has the following icons:

github

clock

chevron_right

arrow_left

chevron_left

chevron_left_double

star_empty

chevron_right_double

hamburger

external_link

arrow_right

star

Helper Sass Mixins

icon-block

icon-block will let you create a sized element with icon centred inside of it. This is ideal for little square blocks with icons inside them.

Passing only one value in will size the element and the icon will use it's inline width/height to size itself:

<div class="icon-block-32">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" style="width: 32px; height: 32px; " class="icon-clock">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke">
    <path d="M23.5,12 C23.5,18.352 18.35,23.5 12,23.5 C5.647,23.5 0.5,18.352 0.5,12 C0.5,5.648 5.647,0.5 12,0.5 C18.35,0.5 23.5,5.648 23.5,12 L23.5,12 Z"/>
    <polyline points="11.5 6.5 11.5 12 17.5 17.5"/>
  </g>
</svg></div>

.icon-block-32 {
  @include icon-block(32px);
  background: orange;
}

Passing two values in will size the element as a square using the first value as the width and height, and size the icon as a square as well using the second value as the width and height:

<div class="icon-block-32-16">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" style="" class="icon-clock">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke">
    <path d="M23.5,12 C23.5,18.352 18.35,23.5 12,23.5 C5.647,23.5 0.5,18.352 0.5,12 C0.5,5.648 5.647,0.5 12,0.5 C18.35,0.5 23.5,5.648 23.5,12 L23.5,12 Z"/>
    <polyline points="11.5 6.5 11.5 12 17.5 17.5"/>
  </g>
</svg></div>

.icon-block-32-16 {
  @include icon-block(32px, 16px);
  background: orange;
}

You can also treat both values as a list of ($width, $height):

<div class="icon-block-lists">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="" class="icon-chevron_right">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg></div>

.icon-block-lists {
  @include icon-block((64px, 32px), (11px, 16px));
  background: orange;
}

table-icon

You can create some text aligned with an icon with the table-icon($icon-size) mixin, like so:

This text is aligned to the icon

<div class="icon-table-32">
  <div class="icon-table--icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" style="width: 32px; height: 32px; " class="icon-clock">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="translate(1 1)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke">
    <path d="M23.5,12 C23.5,18.352 18.35,23.5 12,23.5 C5.647,23.5 0.5,18.352 0.5,12 C0.5,5.648 5.647,0.5 12,0.5 C18.35,0.5 23.5,5.648 23.5,12 L23.5,12 Z"/>
    <polyline points="11.5 6.5 11.5 12 17.5 17.5"/>
  </g>
</svg>  </div>
  <div class="icon-table--label">
    This text is aligned to the icon
  </div>
</div>

.icon-table-32 {
  @include icon-table(32px);
}

You can pass in custom guttering with a second parameter:

Go back

<a href="#" class="icon-table-16">
  <div class="icon-table--icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" style="width: 16px; height: 16px; " class="icon-arrow_left">
  <g fill="none" fill-rule="evenodd" stroke="#000000" stroke-width="2" transform="rotate(180 12.5 12)" stroke-linecap="round" stroke-linejoin="round" class="icon--stroke">
    <path d="M23.4687,12 L0.4687,12"/>
    <polyline points="10.969 22.791 23.469 11.791 10.969 .791"/>
  </g>
</svg>  </div>
  <div class="icon-table--label">
    Go back
  </div>
</a>

.icon-table-16 {
  @include icon-table(16px, 8px);
}