These icons were originally created for Sargent Coding projects, but they're open for everyone to use now.

You can use the library via JSDelivr at https://cdn.jsdelivr.net/gh/sargent-coding/icons/icons.js

The icons library has three ways of adding icons:

^{Quick note: Icons like caret.right and font.family are nested. These can be used as names too: new Icon("caret.right")}

You can add an inline icon in an HTML by placing something like:

<saco-icon name="pencil"></saco-icon>

You also have two methods of adding icons using Javascript:

It's simpler to use the new keyword to make icons:

let myNewIcon = new Icon("pencil");
document.body.append(myNameIcon);

But, you can also create an element and set its name attribute:

let myNewIcon = document.createElement("saco-icon");
myNewIcon.setAttribute("name", "pencil");
document.body.append(newNewIcon);

Changing an icon is really easy-- and you also have two ways to do it:

You can set the name property to something else:

myNewIcon.name = "javascript";

or you can also use Element.setAttribute():

myNewIcon.setAttribute("name", "javascript");

Colours automatically change to the font colour using the really cool currentColor keyword!