Atom comes bundled with the Octicons 4.4.0 icon set. Use them to add icons to your packages.
NOTE: Some older icons from version
2.1.2are still kept for backwards compatibility.
In the Styleguide under the "Icons" section you'll find all the Octicons that are available.
Octicons can be added with simple CSS classes in your markup. Prefix the icon names with
As an example, to add a monitor icon (
device-desktop), use the
icon icon-device-desktop classes:
<span class="icon icon-device-desktop"></span>
Octicons look best with a
16px. It's already used as the default, so you don't need to worry about it. In case you prefer a different icon size, try to use multiples of 16 (
48px etc.) for the sharpest result. Sizes in between are ok too, but might look a bit blurry for icons with straight lines.
Although icons can make your UI visually appealing, when used without a text label, it can be hard to guess its meaning. In cases where space for a text label is insufficient, consider adding a tooltip that appears on hover. Or a more subtle
title="label" attribute would help as well.