Icons

These icons are used throughout the site.

Usage:

Import the icons macro.

Call the .get() function passing it the icon name.

(Optional) The second argument is any classes you would like to apply to the svg element.

(Optional) The icons used in the header and footer use a sprite. This keeps us from repeating svg markup on the page. If you'd like to bypass the sprite and embed the svg directly, pass in a flag of TRUE as the third argument. Note: only the icons used in the header and footer currently use a sprite. All others are embedded directly.

Example normal usage:

{% import '@h4h_theme/icons/icons.twig' as icons %}
{{ icons.get('heart', 'icon icon--heart') }}

This will render the svg inline with whatever class or classes are passed as the second argument.

<svg aria-hidden="true" role="img" class="icon icon--heart">...</svg>

Example normal usage with icon in sprite:

{% import '@h4h_theme/icons/icons.twig' as icons %}
{{ icons.get('heart', 'icon icon--facebook') }}

This will render the svg wrapper inline with a use statement to the sprite and whatever class or classes are passed as the second argument.

<svg aria-hidden="true" role="img" class="icon icon--facebook">
  <use xlink:href="#facebook-icon"></use>
</svg>

Example bypass sprite with direct embed:

{% import '@h4h_theme/icons/icons.twig' as icons %}
{{ icons.get('facebook', 'icon icon--facebook', true) }}

This will skip the sprite and render the svg inline with whatever class or classes are passed as the second argument.

<svg aria-hidden="true" role="img" class="icon icon--facebook">...</svg>

Styles:

While there are no styles included by default, a modifier can be added to give an icon some style.

  • icon--green - Green icon.

facebook

twitter

youtube

pinterest

instagram

linkedin

hand

heart

inbox

search

bars

share

This field is required.

asterisk

play

chevronright

home

arrowright

newsletter

list

picture

calendar

map

PhoneA smartphone

phone

MailAn envelope

mail

WebsiteA computer monitor with a mouse cursor displayed in the center

website

close

plusminus

dots