Go to homepage

User Interface Icons

Build apps and websites with user interface icons for menus, settings, forms, layouts, and system feedback. The set includes hamburger menus, sliders, toggles, checkboxes, radio buttons, search fields, sidebars, alerts, and progress bars 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
  • Hamburger menu icon
  • Settings sliders icon
  • Toggle switch icon
  • Checked checkbox icon
  • Selected radio button icon
  • Search field icon
  • Left sidebar layout icon
  • Grid layout icon
  • Eye icon
  • Trash can icon
  • Add circle icon
  • Info circle icon
  • Warning triangle icon
  • Vertical dots menu icon
  • Progress bar icon
  • Carousel icon

Everyday interface controls from Nucleo Core are shown here as 16 outline icons at 32px. Menus, toggles, checkboxes, alerts, and layout icons cover settings screens, admin panels, wireframes, and design system docs.

Dashboard icon
Kanban board icon
Layers icon
Gear icon

Nucleo UI is designed on an 18px grid specifically for interface components. These fill duo icons pair a solid shape with a lower-opacity tone, giving dashboard, boards, layers, and settings tabs a clear active state in sidebars and app bars.

Form icon

Forms

Table icon

Data tables

Dropdown menu icon

Dropdowns

UI card icon

Cards

Component libraries and UI kit docs can tag each pattern with Nucleo UI icons in the outline duo style. Forms, data tables, dropdowns, and cards become easy to scan in sidebars, filters, and changelogs.

  • Drag handle icon

    Drag and drop

    Reorder list items and blocks with a grab handle

  • Resize window icon

    Responsive layout

    Adapt panels and columns to any screen width

  • Brightness down icon

    Dark mode

    Switch themes to cut glare when working at night

  • Steps indicator icon

    Onboarding

    Guide new users through setup one step at a time

Nucleo Pixel icons sit on a 24px pixel grid with crisp, square strokes, a good match for product feature cards. A drag handle, resize arrows, brightness, and a steps indicator explain drag and drop, responsive layouts, dark mode, and onboarding.

Icon Categories

Enhance your icon workflow 10x with the Nucleo app

Launch Web App
Nucleo app preview