Icons

Datastory uses Nucleo app to store and manage icons. Nucleo app contains both icons from the Nucleo library as well as Google Material icons. In addition, custom icons can be added. Currently, many of the Datastory UI icons are based on iconsvg.xyz. The Datastory icons are divided in two sets:

1. Datastory flags
2. Datastory UI icons

To work with icons in Datastory you need to:

1. Download Nucleo

2. Get access to the Datastory project on Dropbox

Once you do that you should see Datastory-icons under the Datastory project (highlighted in the image below). It should look something like this:

General guidelines

• Please use the 24px grid. This will ensure a consistent level of icon detail across Datastory products. Exceptions include flags that are 512px wide.
• Use outlined icons instead of filled ones where possible.
• Use short names that are ideally only one word (e.g. share, twitter, envelope etc.)
• In cases where an icons does include more than one word, use underscore (e.g. arrow_right)
• Rename icons after you have added them to Datastory UI icons.

Use the 24px grid for icons.

Add new icons

1. First check that the icon you need is not already included in the Datastory project on Nucleo.

2. Go under Projects > Datastory > Datastory UI icons and make sure you are synced with the latest version of the project.

3. Search for and select the icon you would like to add to the Datastory set.

4. Add icon to Projects > Datastory > Datastory UI icons.

5. Go under the Projects tab and select My projects > Datastory > Datastory UI icons

6) Rename the new icon by selecting it and renaming it in the Info sidebar.

Add custom icons

1. Go to custom-icons.sketch and create your icon there.

2. Export the new custom icon as svg.

3. Under My sets in Nucleo, create a custom-icons set. This is where you will continue adding the custom icons.

4. Drag and drop the new custom svgs into the custom-icons set and click import.

5. Add the new custom icons to Datastory UI icons project as usually (See "Add new icons section").

Replace existing icons

When replacing an icon, make sure to delete the old version before adding a new one. If you don't delete the old version, the new icon will be renamed to something like iconname-2, and will not work with the <Icon /> component.

Export icons

1. Once you made your changes, select the Datastory UI icons project. Make sure you select the whole project, and not just one icon.

2. You can either right click on the project name in the sidebar and choose Export.

3. Choose save as SVG, SVG symbol and check Remove inline colors and Remove stroke-width values.

This will export 3 files: a demo.html, an icons.svg and a style.css. You only need icons.svg.

4. Rename icons.svg to Datastory-icons.svg and add it to the Datastory website repo under images.

5. Replace the old Datastory-icons.svg file with the new one you created. Commit and merge your changes and Voila, you are done!

Preview

Below you can find all the icons and flags available in the sprite sheet.

Icons

Flags