Petalicons is an icon set with over 130 original icons included in Petal. All icons are in vector SVG format packed into one font file.

Inserting icons directly in HTML

First use the .petalicon class to load the basic style for the icon element, then write the class name for the actual icon, like example below:

<i class="petalicon petalicon-zoomin"></i>
<i class="petalicon petalicon-zoomout"></i>

Although the petalicon classes are not bound to <i> tags, but it's recommended you use a unique separate element for the icons to avoid collision. The icons use the :before pseudo-element to insert unicode characters that are replaced by the glyphs in the icon font.

The icons require external icon font files to be loaded properly, so make sure the file path set by the @petalicon-file-path variable in the petal.less file is valid.

Inserting icons in stylesheets

You can also insert icons through stylesheets as LESS mixin classes inside your project stylesheet. You can only use this method if you're including Petal source less files in your project's stylesheet build.

<!-- HTML code -->
<div class="lock-state-indicator locked">
  <span class="icon"></span>
  <span class="text-label">Locked</span>
</div>

// LESS code
.lock-state-indicator {
  &.unlocked {
    .icon:before {
      .petalicon;
      .petalicon-lock-unlocked;
    }
  }

  &.locked {
    .icon:before {
      .petalicon;
      .petalicon-lock-locked;
    }
  }
}

Make sure you're calling the mixins inside a :before (or :after) pseudo element.

Managing icon size and alignment

The icons are are all designed on a 16px grid and fine-tuned to match the pixel grid. The .petalicon class strictly defines the icons as 16px size by default to ensure icons stay sharp at small sizes. In cases you want to resize icons, you must target the .petalicon:before pseudo element and manually override font-size property.

If you want to simply double the icon size to 32px, use the optional class .x2. You can also call it as a LESS mixin by writing .petalicon.x2();.

When aligning icons with text vertically, use vertical-align: middle appropriately.