XYZ Icon Set

Free, open-source set of icons!

Browse all icons at XYZ Icon Set Website.

It is recommended to use implementation packages for use with Vue and React. Alternatively check out vanilla JS usage below.

Usage

Installation with NPM

npm install xyz-icon-set

Importing icon from a package

Note: Examples are shown with ES6 syntax

You can import icons selectively by its name with suffix "Icon" (to prevent variable name collisions and misuse of keywords in cases such as return or copy icons).

Example of importing the paper plane icon object

import { PaperPlaneIcon } from 'xyz-icon-set';

or import as default export

import XYZIconSet from 'xyz-icon-set';

const { PaperPlaneIcon } = XYZIconSet;

Icon API Reference

Note: This reference tries to define the specs for v1. So far it is not completely done and is subject to change.

To access Icon API, you need to first get an instance of icon. The reasoning behind using classes is the usage of read-only properties passed to the constructor (such as theme). Other properties are reactive and pass

import { PaperPlaneIcon } from 'xyz-icon-set';

const paperPlaneIcon = new PaperPlaneIcon();

Parameters

iconOptions

theme

Either regular or thin.

Default value: regular

Example

new PaperPlaneIcon();
// Returns `regular` PaperPlaneIcon instance

new PaperPlaneIcon({ theme: 'thin' })
// Returns `thin` PaperPlaneIcon instance

Static Properties

.name · Icon name in camel-case format.

PaperPlaneIcon.name === 'PaperPlaneIcon';

.category · Semantic category of the icon. Used mostly for showcase purposes.

PaperPlaneIcon.category === 'social';

`.toString(options)`

Returns SVG string representation of the icon.

Parameters

options

Object describing visuals of the icon.

fillOpacity

Opacity of the transparent fill inside of the icon. Accepts values between 0 and 1. It is not recommended to use higher values than 0.5 as it could break the legibility and recognizability of the icon.

Default value: 0

Returns

String of the icon in SVG format.

Example

const paperPlaneIcon = new PaperPlaneIcon();

paperPlaneIcon.toString({
    fillOpacity: 0.25,
});
// "<svg width=\"24\" height=\"24\" view..."

`.toSVGElement(options)` (browser only)

Returns DOM representation of the icon. If it was called already, it'll return the same DOM object. If you wish to create a new

This method is browser only, if you try to run it without browser document object in the global scope, it throws an error.

Parameters

options

Object describing visuals of the icon.

fillOpacity

Opacity of the transparent fill inside of the icon. Accepts values between 0 and 1. It is not recommended to use higher values than 0.5 as it could break the legibility and recognizability of the icon.

Default value: 0

Returns

SVG DOM object of the icon.

Example

const paperPlaneIcon = new PaperPlaneIcon();

paperPlaneIcon.toSVGElement({
    fillOpacity: 0.25,
});
// #document-fragment
//    <svg width="24" height="24" view...

`.setIconOptions(options)`

Updates DOM object generated by .toSVGElement(). This means that this method can be called only after toSVGElement.

Parameters

options

Object describing visuals of the icon.

fillOpacity

Opacity of the transparent fill inside of the icon. Accepts values between 0 and 1. It is not recommended to use higher values than 0.5 as it could break the legibility and recognizability of the icon.

Default value: 0

Returns

SVG DOM object of the icon.

Example

To update the icon options in run-time, use .setIconOptions(options) method on (in this case) the paperPlaneIcon like this

const paperPlaneIcon = new PaperPlaneIcon();

paperPlaneIcon.toSVGElement({
    fillOpacity: 0.25,
});

paperPlaneIcon.setIconOptions({
    fillOpacity: 0.5,
});

FAQ

Why is icon font not supported?

Generally text rendering is different to graphics rendering. There are many issues with icon fonts caused by the technology misuse. Eg. It could cause that the experience will be broken when certain accesibility options are on in the web browser.

Contributing

There's public Figma project which contains always the most recent changes. If you don't find the icon you were looking for, please search through issues or file a new one. There are no plans on allowing direct contributions to icon files.