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

<div>
    <div class="pl-wrapper-padded-float">
        <div class="pl-icon icon icon-chevron-sm-up"></div>
        <div class="pl-label-primary">.icon-chevron-sm-up</div>
    </div>
</div>
<div>
  <div class="pl-wrapper-padded-float">
    <div class="pl-icon icon {{ className }}"></div>
    <div class="pl-label-primary">{{ text }}</div>
  </div>
</div>
{
  "className": "icon-chevron-sm-up",
  "text": ".icon-chevron-sm-up"
}