Build product interfaces with design and development icons for design tools, code editors, documentation, and developer portfolios. The library spans pen tools, vector paths, eye droppers, gradients, layout grids, boolean operations, terminals, bugs, databases, and responsive devices in outline, fill, and duo styles. Download them as SVG, copy them as React components, or customize them in the Nucleo apps.
Nucleo Core covers both sides of product work, with outline and fill styles at 24, 32, and 48px. These 16 outline icons at 32px mix creative tools like the pen nib, eye dropper, and gradient with a terminal, a bug, and a database for toolbars, tutorials, and dev docs.
Picture the sidebar of a design tool: Nucleo UI icons in fill duo mark layers, color styles, prototyping, and code inspection. On the 18px grid, the lower-opacity secondary tone separates each icon's main shape from its details.
Work in progress
Ready for review
Dark mode
Open source
Status labels in project boards and component libraries read faster with outline duo icons from Nucleo UI. Tag work in progress, pull requests ready for review, dark mode support, and open source repos on issue trackers, changelogs, and design system docs.
UI design
Sketch screens and flows for web and mobile apps
Components
Build reusable parts that keep products consistent
User flows
Map screens and logic before writing any code
Motion
Fine-tune easing curves for smooth transitions
Square strokes on a 24px pixel grid give Nucleo Pixel icons a crisp, technical feel. A laptop with a pen, a code component, connected nodes, and an easing curve introduce UI design, components, user flows, and motion in feature cards and course pages.
Browse icons by category: