In this article, we’ll take a look at how to include icons in your design system, with some additional CSS techniques to customize them according to your needs.

Here’s what we will cover:
- Integrating icons into your design system;
- Classes for icon sizes;
- Icon style variations;
- Aligning icons to text;

This article is part of a series on design systems inspired by our library of web components. The library relies on a solid system of CSS globals. So this is us sharing the things we’ve learned setting the global style of our library! ✌

Article Series:
- Part 1: Typography
- Part 2: Grid & Layout
- Part 3: Colors
- Part 4: Spacing
- Part 5: Icons
- Part 6: Buttons

Integrating icons in your design system

There are…


We just released the Icon Transition Generator, an online tool that generates SVG-powered icon transitions. The tool accepts two SVG icons and exports a single SVG file that includes the JavaScript code for the animation.

If you are using the Nucleo app, you can upload and preview the animated icons generated by the tool directly within the app! 🙌


It’s a natural behavior of text elements to include some space on top (and bottom) of the element itself based on its line-height value. In some cases, you may need to remove those spaces as they can create inconsistencies in your page design.

In this article we are going to take a look at how we can remove this space from the text elements using a simple SCSS mixin.

This mixin was originally created for our library of web components and can be easily included in your web project as it has no external dependencies.

🔥📢 Check our updated article


Choosing how to handle layouts and content positioning is probably one of the first decision you’re going to make when building a design system.

Defining the grid means creating the system to structure your content, whether it’s a single component or a page layout.

In this article, we are going to see how a grid system can be implemented, and how some CSS techniques can be used to create specific layouts.

Here’s what we will cover: 1) Layout with an auto-generated number of columns — using CSS Grid; 2) One-dimensional layout — using Flexbox; 3) Two-dimensional layout — using CSS…


There are different options when it comes to integrating icons in a design system. Each option has its pros and cons. Although there’s no such thing as “the perfect method”, we’ll help you find the one that suits your needs. In this two-article series, we’ll go over the main integration techniques, and we’ll see some practical code examples.

This guide is the answer to all the requests we receive at Nucleo about how to use the icons exported via the app. The Nucleo icon manager offers plenty of export options to choose from, but it’s not always straightforward which one…


After almost a year of silence, here we are back on track with CodyHouse!

We have a brand new Web Components section (content coming soon), we have started improving (and fixing) the nuggets published in the past, and of course, we have a new website! 🙂

Here are some insights on how we built CodyHouse 2.0. Hope you find them interesting!

Back-end

CodyHouse has been a WordPress website since the beginning.
When we first developed it, it seemed like the best option, considering the kind of content we wanted to share; and it suited us pretty well!

With the new website…


About a week ago, we released two new Nucleo categories: interactive icons and animated loops!

Preview/edit the demo on Codepen: https://codepen.io/claudiar/pen/pdNLyy

The first time you hear about Nucleo? Learn more and download the app for free:
https://nucleoapp.com/

Let’s see how to use them to create custom checkbox and radio buttons!

We’ll start with a basic html form template:

Basic HTML form structure

Now we can grab the code of the checkbox and radio icons from the Nucleo app. Each icon is composed of visual elements (paths, circles, polygons…), and a script that generates the animation. We can remove the script…

Claudia Romano

Web Developer. Co-founder of @CodyWebHouse and @nucleoapp

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store