Devfont

Devfont is a premium, simply and beautiful set of 900+ open source icons for designers and developers. Each icon is designed on a 24x24 grid with an emphasis on readability, consistency, simplicity, flexibility and perfect pixels. Of course, all the icons are free for both personal and commercial use.

Search, preview and download at devfont.com

npm install devfont

yarn add devfont

Quick start

Simply copy and paste the following code snippet into a blank html file to begin prototyping with Devfont.

<!DOCTYPE html>
<html lang="en">
  <script src="https://unpkg.com/devfont"></script>
  <body>

    <!-- example icon -->
    <i data-devfont="circle"></i>

    <script>
      devfont.replace()
    </script>
  </body>
</html>

Usage

At its core, Devfont is a collection of SVG files. This means that you can use Devfont in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe).

The following are additional ways you can use Devfont.

Client-side JavaScript

Install

npm install devfont

yarn add devfont

Or just copy devfont.js or devfont.min.js into your project directory.

Include

<script src="path/to/dist/devfont.js"></script>

Or load the script from a CDN provider.

<script src="https://unpkg.com/devfont"></script>

After including the script, Devfont will be available as a global variable.

To use an icon on your page, add a data-devfont attribute with the icon name to an element:

<i data-devfont="circle"></i>

Replace

Call the devfont.replace() method:

<script>
  devfont.replace()
</script>

All elements that have a data-devfont attribute will be replaced with SVG markup corresponding to their data-devfont attribute value.

Node

Install

npm install devfont

yarn add devfont

Require

const devfont = require("devfont")

devfont.icons.x
// {
//    name: "x",
//    contents: "<line ... /><line ... />",
//    tags: ["cancel", "close", "delete", "remove"],
//    attrs: {
//      class: "devfont devfont-x",
//      xmlns: "http://www.w3.org/2000/svg",
//      width: 24,
//      height: 24,
//      viewBox: "0 0 24 24",
//      fill: "none",
//      stroke: "currentColor",
//      "stroke-width": 2,
//      "stroke-linecap": "round",
//      "stroke-linejoin": "round",
//    },
//    toSvg: [Function],
// }

devfont.icons.x.toSvg()
// <svg class="devfont devfont-x" ...><line ... /><line ... /></svg>

devfont.icons.x.toSvg({ class: "foo bar", "stroke-width": 1, color: "red" })
// <svg class="devfont devfont-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>

SVG Sprite

Install

npm install devfont

yarn add devfont

Or just copy devfont-sprite.svg into your project directory.

<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use xlink:href="path/to/devfont-sprite.svg#circle" />
</svg>

However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:

.devfont {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

<svg class="devfont">
  <use xlink:href="path/to/dist/devfont-sprite.svg#circle" />
</svg>

Contributing

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

Design

See all icons on Figma.

License

Devfont is licensed under the MIT License.

Credits

Based on Feather Icons. See the Feather repo and the Feather website

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

alexperronnet / devfont

Programming Languages

Labels