Icons

Learn how to add vector icons to your web pages.

Style

Pathify uses the Material Design icon style. You can find and download Material Design Icons from pictogrammers.com. Please see the Material Design Guidelines if you want to create your own icon.

Structure

In order to add a vector icon to your web page and retain the ability to change its color, you need to add the icon’s svg code directly to your html and follow the rules below.

Export the icon in SVG format. Make sure it is exported at 24px by 24px.
Remove the width and height attributes from the <svg> tag.
Make sure that <svg> has viewBox="0 0 24 24".
Make sure that <svg> and <path> has no fill=”...” attributes, otherwise you won’t be able to change the color of an icon.
Add the .icon class to the <svg> or its parent <div>. This class forces the icon to use the color CSS property as its fill.

Icon Size

By default, the icon will have a size of 24px x 24px and the color that it inherits from its ancestor tag.

You can modify the size of an icon by adding the .size-xx classes to the element wrapping the <svg>.
Example: .size-16 or .size-40.
Please, refer to the Layout page to view all size classes.

Snippet:

<div class="icon size-40" aria-hidden="true">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="m11.484.984 9.516 5.016v2.016h-18.984v-2.016zm4.5 9h3v7.032h-3zm-13.968 12v-3h18.984v3zm7.968-12h3v7.032h-3zm-6 0h3v7.032h-3z" fill-rule="evenodd">
    </path>
  </svg>
</div>

Icon Color

By default, the icon will have a color that it inherits from its ancestor tag.

You can modify the color of an icon using the .text-{color} or .color-{color} classes. Example: .text-muted or .color-red. Please, refer to the Color page to view all color classes.

Snippet:

<div class="icon color-red" aria-hidden="true">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="m11.484.984 9.516 5.016v2.016h-18.984v-2.016zm4.5 9h3v7.032h-3zm-13.968 12v-3h18.984v3zm7.968-12h3v7.032h-3zm-6 0h3v7.032h-3z" fill-rule="evenodd">
    </path>
  </svg>
</div>

Structure

In order to add a vector icon to your web page and retain the ability to change its color, you need to add the icon’s svg code directly to your html and follow the rules below.

Export the icon in SVG format. Make sure it is exported at 24px by 24px.
Remove the width and height attributes from the <svg> tag.
Make sure that <svg> has viewBox="0 0 24 24".
Make sure that <svg> and <path> has no fill=”...” attributes, otherwise you won’t be able to change the color of an icon.
Add the .icon class to the <svg> or its parent <div>. This class forces the icon to use the color CSS property as its fill.

Icon Size

By default, the icon will have a size of 24px x 24px and the color that it inherits from its ancestor tag.

You can modify the size of an icon by adding the .size-xx classes to the element wrapping the <svg>.
Example: .size-16 or .size-40.
Please, refer to the Layout page to view all size classes.

Snippet:

<div class="icon size-40" aria-hidden="true">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="m11.484.984 9.516 5.016v2.016h-18.984v-2.016zm4.5 9h3v7.032h-3zm-13.968 12v-3h18.984v3zm7.968-12h3v7.032h-3zm-6 0h3v7.032h-3z" fill-rule="evenodd">
    </path>
  </svg>
</div>

Icon Color

By default, the icon will have a color that it inherits from its ancestor tag.

You can modify the color of an icon using the .text-{color} or .color-{color} classes. Example: .text-muted or .color-red. Please, refer to the Color page to view all color classes.

Snippet:

<div class="icon color-red" aria-hidden="true">
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="m11.484.984 9.516 5.016v2.016h-18.984v-2.016zm4.5 9h3v7.032h-3zm-13.968 12v-3h18.984v3zm7.968-12h3v7.032h-3zm-6 0h3v7.032h-3z" fill-rule="evenodd">
    </path>
  </svg>
</div>