Sun icon - Free SVG for React, Vue, Svelte, Angular, Solid & Preact - Customizable interface vector icon

Install with shadcn CLI

npx shadcn@latest add https://www.shadcn.io/registry/heroicons-sun.json
npx shadcn@latest add https://www.shadcn.io/registry/heroicons-sun.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/heroicons-sun.json
bunx shadcn@latest add https://www.shadcn.io/registry/heroicons-sun.json
Category:interface
Tags:sunlightbrightnessthemeday modeilluminationappearance

The sun icon represents light mode and brightness control with its radiating sun design showing illumination.

This light symbol has become the universal indicator for light theme, brightness settings, day mode, and illumination controls across all modern applications and theme systems.

Frequently Asked Questions

Common questions about the Sun icon

Similar Icons

View Columns 20 Solid - layout icon from HeroIcons
view columns 20 solid
Divide - interface icon from HeroIcons
divide
Building Office Solid - interface icon from HeroIcons
building office solid
Bars Arrow Down - interface icon from HeroIcons
bars arrow down
Bars Arrow Up 20 Solid - interface icon from HeroIcons
bars arrow up 20 solid
Building Library 16 Solid - interface icon from HeroIcons
building library 16 solid
Pause 20 Solid - media icon from HeroIcons
pause 20 solid
Inbox 16 Solid - communication icon from HeroIcons
inbox 16 solid
Equals - interface icon from HeroIcons
equals