Icon fonts, Shopping icon category and new SVG sprites export features


Lets kick off the Nucleo blog with the first big update since the recent launch! Today we introduce 1) a new icon category: Shopping, 2) Nucleo icon fonts and 3) new export features, specifically for SVG sprites.

First of all, a fresh new set of shopping icons, already available through the web app and uploaded inside the source files. We’re planning to release 2-3 new sets of icons each month, make sure to follow us on Twitter/Facebook to miss none ;)

shopping icons

One of the most requested features by developers was the icon font version of Nucleo. Today we release the first version of Nucleo web font! With the release of new icon packs, we’ll make sure to update the font as well.

The font is available for download in the source files section.

Here is a quick video that shows you where to download the font, and some basic tips about how to use it.

The exporting feature is one of the reasons why Nucleo stands out from the rest of icon packs. Today we introduce 2 new options, that will allow designers and developers to create SVG image sprites in seconds! One option lets you create a copy of your icons, and assign it a secondary colour (active status). The second option takes advantage of the SVG technique to export all icons inside the same SVG file as symbol elements.

Here is a brief walk-through of the new exporting features:

We’re working hard daily to improve both the app and the icons variety. If you have a suggestion, we’d love to hear your voice. Comment the post, or contact us by email.

  • http://www.lewishowles.co.uk/ Lewis Howles

    Loving the speed of progress of this app so far. I only sent in a query the other day about symbol export.

    My only comments regarding the generated symbols:

    – It looks like each icon is wrapped in a group tag – this could be removed to further optimise the file size.

    – The fill=”none” could be removed completely where appropriate for the same reason

    – The IDs – it would be great if these defaulted to the name of the icon (e.g. ‘speech-bubble’ or ‘cart’), rather than ‘nc-icon-1′, ‘nc-icon-2′, etc.

    – The svg tag itself – in my experience you don’t need xmlns:xlink value, and the style attribute isn’t needed if you’re using an external .svg file (which can then be cached, as opposed to including the SVG tag on the page).

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Lewis, thanks for the feedback! We’ll make sure to improve the SVG export with the next update ;)