Icons

Icon styles

Many of the site’s icons are from different contributors on The Noun Project, and are used under a Creative Commons license with attribution in the humans.txt file. Others are designed from scratch.

Even though they are from different sets and artists, they share common style attributes. When picking or building new icons, make sure to match these characteristics:

  • highly rounded corners
  • default style uses heavy outlines, unfilled solid interior spaces
  • if shapes overlap in space, lines leave a gap where they meet instead of intersecting (.icon-cloud, .icon-wind, .icon-coal, .icon-copper )

Creating new icons

For finding or building new icons in the future, the following resources match icon characteristics used on the NRRD site. Each example is from an open source icon set, but specific licenses differ for each. After you’ve picked a new icon, be sure to add citations for it to humans.txt

<!-- Default -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon "></div>
        <div class="label-primary"></div>
    </div>
</div>

<!-- Coal -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-coal"></div>
        <div class="label-primary">.icon-coal</div>
    </div>
</div>

<!-- Copper -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-copper"></div>
        <div class="label-primary">.icon-copper</div>
    </div>
</div>

<!-- Hardrock -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-hardrock"></div>
        <div class="label-primary">.icon-hardrock</div>
    </div>
</div>

<!-- Iron -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-iron"></div>
        <div class="label-primary">.icon-iron</div>
    </div>
</div>

<!-- Gas -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-gas"></div>
        <div class="label-primary">.icon-gas</div>
    </div>
</div>

<!-- Geo -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-geo"></div>
        <div class="label-primary">.icon-geo</div>
    </div>
</div>

<!-- Gold -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-gold"></div>
        <div class="label-primary">.icon-gold</div>
    </div>
</div>

<!-- Oil -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-oil"></div>
        <div class="label-primary">.icon-oil</div>
    </div>
</div>

<!-- Wind -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-wind"></div>
        <div class="label-primary">.icon-wind</div>
    </div>
</div>

<!-- Chevron Sm -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-sm"></div>
        <div class="label-primary">.icon-chevron-sm</div>
    </div>
</div>

<!-- Chevron Sm Left -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-sm-left"></div>
        <div class="label-primary">.icon-chevron-sm-left</div>
    </div>
</div>

<!-- Chevron Sm Down -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-sm-down"></div>
        <div class="label-primary">.icon-chevron-sm-down</div>
    </div>
</div>

<!-- Chevron Sm Up -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-sm-up"></div>
        <div class="label-primary">.icon-chevron-sm-up</div>
    </div>
</div>

<!-- Chevron Lg -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-lg"></div>
        <div class="label-primary">.icon-chevron-lg</div>
    </div>
</div>

<!-- Chevron Lg Left -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-lg-left"></div>
        <div class="label-primary">.icon-chevron-lg-left</div>
    </div>
</div>

<!-- Chevron Lg Up -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-lg-up"></div>
        <div class="label-primary">.icon-chevron-lg-up</div>
    </div>
</div>

<!-- Chevron Lg Down -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-chevron-lg-down"></div>
        <div class="label-primary">.icon-chevron-lg-down</div>
    </div>
</div>

<!-- Plus Sm -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-plus-sm"></div>
        <div class="label-primary">.icon-plus-sm</div>
    </div>
</div>

<!-- Plus Lg -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-plus-lg"></div>
        <div class="label-primary">.icon-plus-lg</div>
    </div>
</div>

<!-- Dash Sm -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-dash-sm"></div>
        <div class="label-primary">.icon-dash-sm</div>
    </div>
</div>

<!-- Dash Lg -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-dash-lg"></div>
        <div class="label-primary">.icon-dash-lg</div>
    </div>
</div>

<!-- Close -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-close-x"></div>
        <div class="label-primary">.icon-close-x</div>
    </div>
</div>

<!-- Book -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-book"></div>
        <div class="label-primary">.icon-book</div>
    </div>
</div>

<!-- Map -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-map"></div>
        <div class="label-primary">.icon-map</div>
    </div>
</div>

<!-- Cloud -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-cloud"></div>
        <div class="label-primary">.icon-cloud</div>
    </div>
</div>

<!-- Search -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-search"></div>
        <div class="label-primary">.icon-search</div>
    </div>
</div>

<!-- Bars -->
<div>
    <div class="wrapper-padded-float">
        <div class="icon icon-bars"></div>
        <div class="label-primary">.icon-bars</div>
    </div>
</div>

<div>
  <div class="wrapper-padded-float">
    <div class="icon {{ className }}"></div>
    <div class="label-primary">{{ text }}</div>
  </div>
</div>
/* Default: No context defined */

/* Coal */
{
  "className": "icon-coal",
  "text": ".icon-coal"
}

/* Copper */
{
  "className": "icon-copper",
  "text": ".icon-copper"
}

/* Hardrock */
{
  "className": "icon-hardrock",
  "text": ".icon-hardrock"
}

/* Iron */
{
  "className": "icon-iron",
  "text": ".icon-iron"
}

/* Gas */
{
  "className": "icon-gas",
  "text": ".icon-gas"
}

/* Geo */
{
  "className": "icon-geo",
  "text": ".icon-geo"
}

/* Gold */
{
  "className": "icon-gold",
  "text": ".icon-gold"
}

/* Oil */
{
  "className": "icon-oil",
  "text": ".icon-oil"
}

/* Wind */
{
  "className": "icon-wind",
  "text": ".icon-wind"
}

/* Chevron Sm */
{
  "className": "icon-chevron-sm",
  "text": ".icon-chevron-sm"
}

/* Chevron Sm Left */
{
  "className": "icon-chevron-sm-left",
  "text": ".icon-chevron-sm-left"
}

/* Chevron Sm Down */
{
  "className": "icon-chevron-sm-down",
  "text": ".icon-chevron-sm-down"
}

/* Chevron Sm Up */
{
  "className": "icon-chevron-sm-up",
  "text": ".icon-chevron-sm-up"
}

/* Chevron Lg */
{
  "className": "icon-chevron-lg",
  "text": ".icon-chevron-lg"
}

/* Chevron Lg Left */
{
  "className": "icon-chevron-lg-left",
  "text": ".icon-chevron-lg-left"
}

/* Chevron Lg Up */
{
  "className": "icon-chevron-lg-up",
  "text": ".icon-chevron-lg-up"
}

/* Chevron Lg Down */
{
  "className": "icon-chevron-lg-down",
  "text": ".icon-chevron-lg-down"
}

/* Plus Sm */
{
  "className": "icon-plus-sm",
  "text": ".icon-plus-sm"
}

/* Plus Lg */
{
  "className": "icon-plus-lg",
  "text": ".icon-plus-lg"
}

/* Dash Sm */
{
  "className": "icon-dash-sm",
  "text": ".icon-dash-sm"
}

/* Dash Lg */
{
  "className": "icon-dash-lg",
  "text": ".icon-dash-lg"
}

/* Close */
{
  "className": "icon-close-x",
  "text": ".icon-close-x"
}

/* Book */
{
  "className": "icon-book",
  "text": ".icon-book"
}

/* Map */
{
  "className": "icon-map",
  "text": ".icon-map"
}

/* Cloud */
{
  "className": "icon-cloud",
  "text": ".icon-cloud"
}

/* Search */
{
  "className": "icon-search",
  "text": ".icon-search"
}

/* Bars */
{
  "className": "icon-bars",
  "text": ".icon-bars"
}