A sun with its rays pulled short, for the low end of a brightness range. On a 24×24 grid in stroke, duotone and fill, free under MIT.
WeatherNewv0.5.0Added
16
20
24 px
32
24px
2px
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16.5 12C16.5 14.4853 14.4853 16.5 12 16.5C9.5147 16.5 7.5 14.4853 7.5 12C7.5 9.5147 9.5147 7.5 12 7.5C14.4853 7.5 16.5 9.5147 16.5 12Z" fill="none"/>
<path d="M21.5 12C21.5 12.5523 21.0523 13 20.5 13C19.9477 13 19.5 12.5523 19.5 12C19.5 11.4477 19.9477 11 20.5 11C21.0523 11 21.5 11.4477 21.5 12ZM19.0104 18.0104C19.0104 18.5627 18.5627 19.0104 18.0104 19.0104C17.4581 19.0104 17.0104 18.5627 17.0104 18.0104C17.0104 17.4581 17.4581 17.0104 18.0104 17.0104C18.5627 17.0104 19.0104 17.4581 19.0104 18.0104ZM13 20.5C13 21.0523 12.5523 21.5 12 21.5C11.4477 21.5 11 21.0523 11 20.5C11 19.9477 11.4477 19.5 12 19.5C12.5523 19.5 13 19.9477 13 20.5ZM6.9896 18.0104C6.9896 18.5627 6.5419 19.0104 5.9896 19.0104C5.4373 19.0104 4.9896 18.5627 4.9896 18.0104C4.9896 17.4581 5.4373 17.0104 5.9896 17.0104C6.5419 17.0104 6.9896 17.4581 6.9896 18.0104ZM4.5 12C4.5 12.5523 4.0523 13 3.5 13C2.9477 13 2.5 12.5523 2.5 12C2.5 11.4477 2.9477 11 3.5 11C4.0523 11 4.5 11.4477 4.5 12ZM6.9896 5.9896C6.9896 6.5419 6.5419 6.9896 5.9896 6.9896C5.4373 6.9896 4.9896 6.5419 4.9896 5.9896C4.9896 5.4373 5.4373 4.9896 5.9896 4.9896C6.5419 4.9896 6.9896 5.4373 6.9896 5.9896ZM13 3.5C13 4.0523 12.5523 4.5 12 4.5C11.4477 4.5 11 4.0523 11 3.5C11 2.9477 11.4477 2.5 12 2.5C12.5523 2.5 13 2.9477 13 3.5ZM19.0104 5.9896C19.0104 6.5419 18.5627 6.9896 18.0104 6.9896C17.4581 6.9896 17.0104 6.5419 17.0104 5.9896C17.0104 5.4373 17.4581 4.9896 18.0104 4.9896C18.5627 4.9896 19.0104 5.4373 19.0104 5.9896Z" fill="currentColor" stroke="none"/>
</svg>Related icons
The rest of the sun family first, then the Weather shelf.
FAQ
Answered from sun-dim's own facts: its shelf, the weights it was drawn in, its siblings and its dates.
- What is the sun-dim icon for?
- A sun with its rays pulled short, for the low end of a brightness range. It is filed under Weather in Keyline Icons, drawn on the same 24×24 grid as the rest of the set.
- What styles does the sun-dim icon come in?
- All three: stroke, duotone and fill. They are drawn from the same geometry, so swapping weight never moves anything.
- Is there a square or circle version of sun-dim?
- No. sun-dim is drawn as a bare glyph, and the set has no boxed variant of it.
- What other icons go with sun-dim?
- sun, sun-medium, cloud, cloud-rain, moon and moon-star, and 5 more, all shown below. The sun family is listed first, then the rest of the Weather shelf, so the row under this one is the useful one even where a shelf runs long.
- How do I import sun-dim in React?
- <SunDim /> is the component, and the weight decides the module: stroke from "@keyline-icons/react", duotone from "@keyline-icons/react/duotone" and fill from "@keyline-icons/react/fill". It takes the usual SVG props plus a size, so <SunDim size={16} /> and className="size-4" both work, and there is no provider or theme to set up.
- Where is the sun-dim SVG?
- icons/stroke/sun-dim.svg, icons/duotone/sun-dim.svg and icons/fill/sun-dim.svg in the repository, normalised: no wrapper, no ids and no classes to strip out. The tabs above hand you the same drawing as SVG or JSX without the download, and neither needs an install.
- When was sun-dim added to the set?
- Added 8 Sept 2026. It ships in v0.5.0, so an install at that version or later has it.
Questions about the set rather than about this drawing are answered where they belong. The home page covers what the set is, how the three styles differ, why some icons come boxed and where the Figma file is; installing the set in a shadcn/ui project covers the React package, the CLI and using an icon without React. The MIT licence is stated in the footer of every page.