Hireoglyphs is simple, friendly, and extensive icon library optimised for user interfaces with over 1,100 icons.
Depending on your requirements Hireoglyphs contains optimised SVG icon assets to:
- Copy and paste
<path>notation as embedded SVG icons - Download and use SVG icons as an
<img> - Use a generated SVG sprite
Extending Hireoglyphs with a new icon is simple with the following steps:
- Add icon to a new artboard in the Sketch file
- Export icon to
/iconsdirectory - Optimise icon with
npm run svgscript
Create a new 24px artboard in the Sketch file with the name of the icon desired. Icon names follow the structure:
{name}-{style}- e.g.
houseandhouse-outlinefor general icons
- e.g.
{shape}-{name}-{style}- e.g.
circle-warningandcircle-warning-outlinefor shape based icons
- e.g.
Before exporting ensure the icon has an empty fill color (#000), and is expanded and combinded to a single <path> to minimise output notation.
Export the artboard as a named SVG file to the /icons directory e.g. circle-warning-outline.svg. The file name will be used for the SVG sprite symbol ID along with the name in the docs.
Running the npm run svg script will run:
npm run svg-buildto run the build.js script which:- Optimise the SVG files in the
/iconsdirectory with SVGO - Generate
icons.jsonfile used for website
- Optimise the SVG files in the
npm run svg-spriteto generate SVG sprite file
Hireoglpyh icons are drawn to 24px artboards. The icons use intuitive and recognisable shapes in a soft and friendly style.
The icons are visually aligned to the center of the artboard (vertically and horizontally) and aligned to whole pixel values wherever possible for optmised rendering on screens.
| Property | Value |
|---|---|
border-radius (external) |
2px |
border-radius (internal) |
1px |
line-cap |
rounded |
line-join |
rounded |
stroke-width |
2px |
| Shape | Value |
|---|---|
| Square | 20px × 20px |
| Circle | 22px × 22px |
| Polygon | 22px × 24px |
| Rectangle (vertical) | 16px × 22px |
| Rectangle (horizontal) | 22px × 16px |