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.
npm install xyz-icon-set
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;
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();
iconOptions
-
theme
Either
regular
orthin
.Default value:
regular
new PaperPlaneIcon();
// Returns `regular` PaperPlaneIcon instance
new PaperPlaneIcon({ theme: 'thin' })
// Returns `thin` PaperPlaneIcon instance
.name
· Icon name in camel-case format.
PaperPlaneIcon.name === 'PaperPlaneIcon';
.category
· Semantic category of the icon. Used mostly for showcase purposes.
PaperPlaneIcon.category === 'social';
Returns SVG string representation of the icon.
options
Object describing visuals of the icon.
-
fillOpacity
Opacity of the transparent fill inside of the icon. Accepts values between
0
and1
. It is not recommended to use higher values than0.5
as it could break the legibility and recognizability of the icon.Default value:
0
String of the icon in SVG format.
const paperPlaneIcon = new PaperPlaneIcon();
paperPlaneIcon.toString({
fillOpacity: 0.25,
});
// "<svg width=\"24\" height=\"24\" view..."
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.
options
Object describing visuals of the icon.
-
fillOpacity
Opacity of the transparent fill inside of the icon. Accepts values between
0
and1
. It is not recommended to use higher values than0.5
as it could break the legibility and recognizability of the icon.Default value:
0
SVG DOM object of the icon.
const paperPlaneIcon = new PaperPlaneIcon();
paperPlaneIcon.toSVGElement({
fillOpacity: 0.25,
});
// #document-fragment
// <svg width="24" height="24" view...
Updates DOM object generated by .toSVGElement()
. This means that this method can be called only after toSVGElement
.
options
Object describing visuals of the icon.
-
fillOpacity
Opacity of the transparent fill inside of the icon. Accepts values between
0
and1
. It is not recommended to use higher values than0.5
as it could break the legibility and recognizability of the icon.Default value:
0
SVG DOM object of the icon.
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,
});
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.
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.
XYZ Icon Set is licensed under the MIT License.