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.
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.
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.
Forms
Data tables
Dropdowns
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 and drop
Reorder list items and blocks with a grab handle
Responsive layout
Adapt panels and columns to any screen width
Dark mode
Switch themes to cut glare when working at night
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.
Browse icons by category: