Hicon

What about Hicon?

Hicon is a simple vector icon pack crafted for designers and developers, free and continuously growing.
The idea is to create an open source asset with consistent and minimal design.

Each icon is been designed on Figma using a 24x24 grid.

Usage

Via JS (Recommended)

Start adding the JS file and a short callback at the end of your document <body>. You can download it from this link if you prefer a local setup.

<body>
  <script src="https://cdn.jsdelivr.net/gh/coswise/hicon-js@latest/hicon.min.js"></script>
  <script>
    hicon.replace();
  </script>
</body>

To use the icons on your page, use the icon tag with load-hicon followed by the icon's name.

<i load-hicon="hicon"></i>
<i load-hicon="arrow-right"></i>
<i load-hicon="dribbble"></i>

Via CSS

!NOTICE! - The WebFont is not update with the new version.

Start adding the stylesheet on your document <head>. You can download it from this link if you prefer a local setup.

<head>
  <link rel="stylesheet" href="hicon.min.css">
</head>

Or you ca use the CDN to pull the icons on your site.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/coswise/hicon-css@latest/web-fonts/hicon.min.css">
</head>

To use the icons on your page, add the class h and a second class that start with the prefix h- followed by the icon's name.

<i class="h h-hicon"></i>
<i class="h h-arrow-right"></i>
<i class="h h-dribbble"></i>

Got any feedback or want to contribute?

Feel free to use the follow Google Form.

Figma Source

Check my work on Figma from here.

License

MIT License.
Creative Commons Attribution 4.0 International License.

Hicon Pack is completely free to use on personal or commercial project. However, it will be appreciate if you add credit in your project.

Contact

Email: hicon@cosm.ws