Icon

Natura11y has its own optional icon library. The core framework handles icon sizing and alignment, while the icon font provides the actual glyphs.

Natura11y Icons

Place the Natura11y icon font <link> tag in the <head> of your document. Add icons with a <span>. The .icon class applies the shared icon styling. The .icon-{name} class chooses the icon glyph.

      <!-- Natura11y Icon CSS -->
      <link href="https://cdn.jsdelivr.net/npm/@natura11y/icons@2.2.0/dist/natura11y-icons.min.css" rel="stylesheet" />

      <!-- Icon HTML -->
      <span class="icon icon-home" aria-hidden="true"></span>

Figure 1

Adding Custom Icons

Add icons to Natura11y’s icon library for your own projects, or use the icon package as a starting point for a custom icon font.

Install or download @natura11y/icons on npm to get started.

A Guide to Managing Icons within Figma

Once you open the Figma UI Kit, you’ll notice that the icons are organized into a component library (within the Guide page). This allows you to easily update icons across your design system. It also makes it possible to export icons as SVGs, which can be used to generate your own icon font.

In this way, you can manage your icons both within Figma and on the front-end. This ensures that your icons are consistent and maintainable across your design system.

Step 1: Design the icon

You can create the icon directly in Figma. With the existing Natura11y icons, the original vector layers have been preserved within each component.

The final icon should fit within a 24x24 pixel square, with a pixel or two of breathing room around the edges.

Step 2: Create the icon component

Once you’ve designed the icon, it’s time to create the icon component. Each component has a frame which contains the flattened vector icon layer. The frame is sized to 24x24 pixels, and named according to the icon’s handle (or suffix). In a later step, this frame exports an SVG from Figma. With the example below, the frame is named accessibility.

The icon component contains a group called Artwork. It holds the icon’s original layered shapes. The Artwork group should be used as reference or for modifications, otherwise it should remain hidden within the icon component.

Step 3: Modify the fill rule

This step is only required for icons that contain a hole or multiple paths. For example, the accessibility icon contains two separate paths: one for the head, and one for the body. To ensure that the paths are maintained as expected when the icon is exported as an SVG, you must modify the fill rule from Even-Odd to Non-Zero.

Thankfully, Evan Wallace has made a Figma plugin called Fill Rule Editor that makes it easy to do this.

Step 4: Export the icon as an SVG

Now that the icon is ready, install the SVG Export plugin for Figma. This plugin, created by Hamish allows you to customize the export settings for each icon. Aim to remove any unnecessary attributes and keep the SVG as clean as possible. For example, you should remove any fill or stroke declarations. Ultimately, you want the export to only contain the parent SVG tag and paths that make up the icon.

The SVG Export plugin allows you to preview the code and visual icon before exporting. This helps to ensure the icon is clean and ready to use. Once you’re satisfied with the SVG, export it to your local machine.

Step 5: Generate the icon font

The @natura11y/icons package contains a folder called original-svg. This is where you should save the SVG file. It should be named according to the icon’s handle (or suffix). With the example below, the SVG is named accessibility.svg.

The README.md file in the @natura11y/icons package contains instructions on generating the icon font. Don’t worry, it’s easy! Now you can use your custom icon font within the Natura11y framework and maintain it directly in Figma.

Using the Icons

Using Font Awesome

You don’t have to use Natura11y’s icons. Natura11y’s base icon styling also supports Font Awesome icon classes.

Step 1: Include your Font Awesome kit and markup

If you don’t already have one, create your Font Awesome kit and place the <script> tag in the head of your document (Figure 2). Then include Font Awesome icon markup in your document.

      <!-- Font Awesome Icon Kit -->
      <script src="https://kit.fontawesome.com/your_kit_id.js" crossorigin="anonymous"></script>

      <!-- Font Awesome Icon HTML -->
      <span class="fas fa-frog" aria-hidden="true"></span>

Figure 2

Step 2: Update CSS pseudo-elements unicodes

Natura11y uses icon unicode values for some form controls. If you’re using Font Awesome with those form patterns, update the related custom properties.

      :root {
          --icon-required: "\f14a";
          --icon-checkbox-unchecked: "\f10d";
          --icon-checkbox-checked: "\f10c";
          --icon-radio-unchecked: "\f138";
          --icon-radio-checked: "\f137";
      }