Go to homepage

Design and Development Icons

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.

View All Icons
  • Pen nib icon
  • Vector path icon
  • Paintbrush icon
  • Eye dropper icon
  • Gradient icon
  • Crop icon
  • Typography icon
  • Triangle ruler icon
  • Layout grid icon
  • Boolean union icon
  • Drawing tablet icon
  • 3D cube icon
  • Terminal console icon
  • Bug icon
  • Database icon
  • Responsive devices icon

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.

Layers icon
Color palette icon
Prototype icon
Code icon

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 icon

Work in progress

Pull request icon

Ready for review

Dark mode icon

Dark mode

Code fork icon

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.

  • Laptop with pen icon

    UI design

    Sketch screens and flows for web and mobile apps

  • Code component icon

    Components

    Build reusable parts that keep products consistent

  • Connected nodes icon

    User flows

    Map screens and logic before writing any code

  • Easing curve icon

    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.

Icon Categories

Enhance your icon workflow 10x with the Nucleo app

Launch Web App
Nucleo app preview