How to Design icons
Icon design guide
Designing a small number of icons is a great way to get familiar with the tools and elements. It helps you see how shapes behave at small sizes and how subtle changes in spacing or balance can affect clarity and consistency. Here’s a guideline to design your first icons.
—
Start with a grid
When designing icons, start with a fixed-size frame. For Core, we use a 14x14 px frame divided by a 1px grid. This small frame helps keep the design simple and forces us to focus on clarity. The grid acts as a guide for placing shapes, aligning strokes, and maintaining consistent spacing across all icons.
—
Use simple geometric shapes
Build icons from basic forms like circles, squares, and rectangles. These shapes are easy to control and combine, making your icons clean and readable. In Core, most icons begin with one or two simple shapes, then get refined from there. We avoid overly complex curves or irregular forms unless they add real meaning.
—
Keep them consistent
Consistency is key to making a set feel unified. Core follows a strict set of rules: 1px stroke weight, 1px corner radius, round endpoints, and round joins. These small details create a signature look and help all icons feel like they belong in the same family. You can create your own system, but stick to it once it’s set.
—
Make sure they’re legible
Zoom out often. The icon should still be clear and recognizable even at small sizes. Remove unnecessary details that clutter the shape. We design every Core icon with simplicity in mind, keeping only the most essential shapes. A good rule: if the icon looks messy when small, it’s too complicated.
—
Strip it to the essentials
Every element in your icon should serve a purpose. In Core, we reduce each icon to its most essential form. If a shape doesn’t improve recognition or meaning, we get rid of it. This helps the icons stay neutral, legible, and versatile, ready to work in different sizes and contexts.
—
Align and balance everything
Precise alignment matters, but so does visual balance. Sometimes elements that are mathematically centered still look off. In those cases, we adjust by eye. Optical correction makes a huge difference.
—
💡 Pro Tip: Sketch when it helps
While sketching is optional (you can create the icon right away if you’re already familiar with the design) it can still be helpful during the process. It’s a quick way to explore and compare ideas without diving straight into detailed editing.
We often sketch when designing and reviewing icons for Core, even if it’s just a rough pass using Figma’s Pencil tool.
