Icons

Phenotypes uses the attractive and comprehensive Nucleo icon set. Nucleo’s 8,000+ icons are vector based, so they’re infinitely scalable. Even so, Nucleo provides optimized graphics for five sizes: 16px, 24px, 32px, 48px, and 64px. The smaller icons progressively sacrifice detail for clarity and recognizability, while the larger icons are richer and more visually interesting.

Icons

Be careful when scaling icons. If you need an icon at an intermediate size, experiment with scaling up or down from the closest provided sizes. When scaling down, look out for details getting lost or visual crowding. When scaling up, make sure lines aren’t getting too thick and the icon isn’t becoming cartoony.

Styles

Nucleo comes in three flavors: outline, glyph (solid), and color. The 16px size only comes in a fourth “mini” flavor, which are essentially size-optimized solid glyphs. At 24px and larger sizes, the outline style is preferred, with a 2px stroke weight and rounded caps and corners (more on that in a bit). Avoid using the full-color icons, as they don’t quite work with the brand color palette.

Apps

Nucleo provides a Mac app and a web app for icon management. When using these apps, be sure the outline style icons are set to use a 2px stroke weight and rounded caps/corners.

The Mac app is super handy for searching and quickly dragging and dropping an icon into Sketch, Photoshop, or pretty much any other software. When you drag an icon out of the Mac app, it automatically creates an SVG with a unique and recognizable name, which should become the layer name in the design software when you drop the icon. Come implementation time, that name should make it very easy for your developer friends to identify the corresponding icon files.

The web app facilitates icon curation workflows, including organizing sets of icons into projects and then exporting those projects as SVG or PNG sprites. You can also quickly grab any icon as PNG or SVG (either as an .svg file or copy-and-paste-able XML) through the web app.

Colors

For outline and glyph style icons, the Nucleo apps allow you to set an accent color. Generally, single color icons are preferred, but combinations of brand colors may be used for special decorative elements. Again, avoid the pre-made full color icon style.


Appendix

Amino has a lifetime team license for Nucleo icons and the apps. Just ask for an available license key or team login credentials (both are in 1Password).

If you’re logged in to the Nucleo website, you can download the following resources:

We also keep an archive of the SVG icons in Dropbox, though they might not be up to date (new icons are added regularly).