uv-index icon

Uv index: uv index, ultraviolet, sun protection, uv. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated uv-index-climb · line-round

The sun gives off its rays: one after another from left to right, each ray streams out off the edge and a new one grows from the sun into its place. Then all four reach out together, pulse once and settle.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.25 s to 2.45 s. Examples and helper.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.854 2.854C11.754 2.953 11.636 3.003 11.5 3.003C11.364 3.003 11.246 2.953 11.146 2.854C11.049 2.756 11 2.638 11 2.5C11 2.362 11.049 2.244 11.146 2.146L12.146 1.146C12.246 1.047 12.364 0.997 12.5 0.997C12.636 0.997 12.754 1.047 12.854 1.146C12.951 1.244 13 1.362 13 1.5C13 1.638 12.951 1.756 12.854 1.854L11.854 2.854ZM1.997 1.5C1.997 1.364 2.047 1.246 2.146 1.146C2.244 1.049 2.362 1 2.5 1C2.638 1 2.756 1.049 2.854 1.146L3.854 2.146C3.953 2.246 4.003 2.364 4.003 2.5C4.003 2.636 3.953 2.754 3.854 2.854C3.754 2.953 3.636 3.003 3.5 3.003C3.364 3.003 3.246 2.953 3.146 2.854L2.146 1.854C2.047 1.754 1.997 1.636 1.997 1.5ZM5.025 4.025C5.367 3.683 5.762 3.424 6.212 3.246C6.625 3.082 7.055 3 7.5 3C7.945 3 8.375 3.082 8.788 3.246C9.238 3.424 9.633 3.683 9.975 4.025C10.317 4.367 10.576 4.762 10.754 5.212C10.918 5.625 11 6.055 11 6.5C11 6.641 10.952 6.759 10.856 6.856C10.759 6.952 10.641 7 10.5 7C10.359 7 10.241 6.952 10.144 6.856C10.048 6.759 10 6.641 10 6.5C10 6.182 9.941 5.875 9.824 5.58C9.697 5.259 9.512 4.976 9.268 4.732C9.024 4.488 8.741 4.303 8.42 4.176C8.125 4.059 7.818 4 7.5 4C7.182 4 6.875 4.059 6.58 4.176C6.259 4.303 5.976 4.488 5.732 4.732C5.488 4.976 5.303 5.259 5.176 5.58C5.059 5.875 5 6.182 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7C4.359 7 4.241 6.952 4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.055 4.082 5.625 4.246 5.212C4.424 4.762 4.683 4.367 5.025 4.025ZM2.5 6C2.641 6 2.759 6.048 2.856 6.144C2.952 6.241 3 6.359 3 6.5C3 6.641 2.952 6.759 2.856 6.856C2.759 6.952 2.641 7 2.5 7L1.5 7C1.359 7 1.241 6.952 1.144 6.856C1.048 6.759 1 6.641 1 6.5C1 6.359 1.048 6.241 1.144 6.144C1.241 6.048 1.359 6 1.5 6L2.5 6ZM12 6.5C12 6.359 12.048 6.241 12.144 6.144C12.241 6.048 12.359 6 12.5 6L13.5 6C13.641 6 13.759 6.048 13.856 6.144C13.952 6.241 14 6.359 14 6.5C14 6.641 13.952 6.759 13.856 6.856C13.759 6.952 13.641 7 13.5 7L12.5 7C12.359 7 12.241 6.952 12.144 6.856C12.048 6.759 12 6.641 12 6.5ZM3.245 11.696C3.245 12.034 3.287 12.318 3.37 12.547C3.453 12.776 3.589 12.948 3.778 13.063C3.822 13.089 3.868 13.113 3.918 13.133C3.948 13.145 3.98 13.156 4.012 13.166C4.013 13.167 4.015 13.167 4.016 13.168C4.162 13.213 4.332 13.235 4.526 13.235C4.737 13.235 4.919 13.209 5.072 13.158C5.074 13.157 5.076 13.157 5.078 13.156C5.129 13.139 5.176 13.119 5.22 13.096C5.234 13.089 5.247 13.081 5.26 13.074C5.266 13.07 5.272 13.067 5.278 13.063C5.464 12.948 5.6 12.776 5.686 12.547C5.772 12.318 5.815 12.034 5.815 11.696L5.815 8L6.769 8L6.769 11.542C6.769 12.126 6.696 12.607 6.55 12.986C6.404 13.364 6.166 13.645 5.837 13.828C5.688 13.911 5.518 13.975 5.327 14.02C5.32 14.021 5.313 14.023 5.306 14.024C5.074 14.077 4.811 14.103 4.517 14.103C4.256 14.103 4.02 14.082 3.81 14.041C3.803 14.04 3.796 14.039 3.788 14.037C3.582 13.995 3.399 13.932 3.241 13.847C3.229 13.841 3.218 13.835 3.206 13.828C2.883 13.645 2.649 13.364 2.506 12.986C2.363 12.607 2.291 12.126 2.291 11.542L2.291 8L3.245 8L3.245 11.696ZM8.746 8.347L8.746 8.348L9.58 10.966L9.813 11.797L9.813 11.798L10.165 13.054L10.199 13.054L10.784 10.966L11.738 8L12.709 8L12.512 8.594L12.511 8.595L10.715 14L9.589 14L7.62 8L8.635 8L8.746 8.347Z"/></svg>

React

// Gentleface "uv-index" (line-round), MIT. https://gentleface.com/icons/uv-index
import type { SVGProps } from 'react';

export function UvIndexIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M11.854 2.854C11.754 2.953 11.636 3.003 11.5 3.003C11.364 3.003 11.246 2.953 11.146 2.854C11.049 2.756 11 2.638 11 2.5C11 2.362 11.049 2.244 11.146 2.146L12.146 1.146C12.246 1.047 12.364 0.997 12.5 0.997C12.636 0.997 12.754 1.047 12.854 1.146C12.951 1.244 13 1.362 13 1.5C13 1.638 12.951 1.756 12.854 1.854L11.854 2.854ZM1.997 1.5C1.997 1.364 2.047 1.246 2.146 1.146C2.244 1.049 2.362 1 2.5 1C2.638 1 2.756 1.049 2.854 1.146L3.854 2.146C3.953 2.246 4.003 2.364 4.003 2.5C4.003 2.636 3.953 2.754 3.854 2.854C3.754 2.953 3.636 3.003 3.5 3.003C3.364 3.003 3.246 2.953 3.146 2.854L2.146 1.854C2.047 1.754 1.997 1.636 1.997 1.5ZM5.025 4.025C5.367 3.683 5.762 3.424 6.212 3.246C6.625 3.082 7.055 3 7.5 3C7.945 3 8.375 3.082 8.788 3.246C9.238 3.424 9.633 3.683 9.975 4.025C10.317 4.367 10.576 4.762 10.754 5.212C10.918 5.625 11 6.055 11 6.5C11 6.641 10.952 6.759 10.856 6.856C10.759 6.952 10.641 7 10.5 7C10.359 7 10.241 6.952 10.144 6.856C10.048 6.759 10 6.641 10 6.5C10 6.182 9.941 5.875 9.824 5.58C9.697 5.259 9.512 4.976 9.268 4.732C9.024 4.488 8.741 4.303 8.42 4.176C8.125 4.059 7.818 4 7.5 4C7.182 4 6.875 4.059 6.58 4.176C6.259 4.303 5.976 4.488 5.732 4.732C5.488 4.976 5.303 5.259 5.176 5.58C5.059 5.875 5 6.182 5 6.5C5 6.641 4.952 6.759 4.856 6.856C4.759 6.952 4.641 7 4.5 7C4.359 7 4.241 6.952 4.144 6.856C4.048 6.759 4 6.641 4 6.5C4 6.055 4.082 5.625 4.246 5.212C4.424 4.762 4.683 4.367 5.025 4.025ZM2.5 6C2.641 6 2.759 6.048 2.856 6.144C2.952 6.241 3 6.359 3 6.5C3 6.641 2.952 6.759 2.856 6.856C2.759 6.952 2.641 7 2.5 7L1.5 7C1.359 7 1.241 6.952 1.144 6.856C1.048 6.759 1 6.641 1 6.5C1 6.359 1.048 6.241 1.144 6.144C1.241 6.048 1.359 6 1.5 6L2.5 6ZM12 6.5C12 6.359 12.048 6.241 12.144 6.144C12.241 6.048 12.359 6 12.5 6L13.5 6C13.641 6 13.759 6.048 13.856 6.144C13.952 6.241 14 6.359 14 6.5C14 6.641 13.952 6.759 13.856 6.856C13.759 6.952 13.641 7 13.5 7L12.5 7C12.359 7 12.241 6.952 12.144 6.856C12.048 6.759 12 6.641 12 6.5ZM3.245 11.696C3.245 12.034 3.287 12.318 3.37 12.547C3.453 12.776 3.589 12.948 3.778 13.063C3.822 13.089 3.868 13.113 3.918 13.133C3.948 13.145 3.98 13.156 4.012 13.166C4.013 13.167 4.015 13.167 4.016 13.168C4.162 13.213 4.332 13.235 4.526 13.235C4.737 13.235 4.919 13.209 5.072 13.158C5.074 13.157 5.076 13.157 5.078 13.156C5.129 13.139 5.176 13.119 5.22 13.096C5.234 13.089 5.247 13.081 5.26 13.074C5.266 13.07 5.272 13.067 5.278 13.063C5.464 12.948 5.6 12.776 5.686 12.547C5.772 12.318 5.815 12.034 5.815 11.696L5.815 8L6.769 8L6.769 11.542C6.769 12.126 6.696 12.607 6.55 12.986C6.404 13.364 6.166 13.645 5.837 13.828C5.688 13.911 5.518 13.975 5.327 14.02C5.32 14.021 5.313 14.023 5.306 14.024C5.074 14.077 4.811 14.103 4.517 14.103C4.256 14.103 4.02 14.082 3.81 14.041C3.803 14.04 3.796 14.039 3.788 14.037C3.582 13.995 3.399 13.932 3.241 13.847C3.229 13.841 3.218 13.835 3.206 13.828C2.883 13.645 2.649 13.364 2.506 12.986C2.363 12.607 2.291 12.126 2.291 11.542L2.291 8L3.245 8L3.245 11.696ZM8.746 8.347L8.746 8.348L9.58 10.966L9.813 11.797L9.813 11.798L10.165 13.054L10.199 13.054L10.784 10.966L11.738 8L12.709 8L12.512 8.594L12.511 8.595L10.715 14L9.589 14L7.62 8L8.635 8L8.746 8.347Z" />
    </svg>
  );
}

Vue

Vue: see /icons/uv-index.md

Svelte

Svelte: see /icons/uv-index.md

HTML img

HTML img: see /icons/uv-index.md

CSS

CSS: see /icons/uv-index.md

Data URL

Data URL: see /icons/uv-index.md

Sprite

Sprite: see /icons/uv-index.md

SwiftUI

SwiftUI: see /icons/uv-index.md

Compose

Compose: see /icons/uv-index.md

Android XML

Android XML: see /icons/uv-index.md

Flutter

Flutter: see /icons/uv-index.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { UvIndexIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

uv index, ultraviolet, sun protection, uv, sunscreen, uv radiation

Alternatives

sun: sunny weather

Tags

uv index, ultraviolet, uv, sun protection, sunburn, sunscreen, sun, radiation, weather, forecast

Category

Weather

Component name

UvIndexIcon

History

2026-11-06 20 px drawn, 24 px drawn, added, released in 0.4.0

Since

version 0.4.0

Family 50

air-quality avalanche celsius earthquake eclipse fahrenheit flood haze hurricane landslide moon moon-off

More weather icons

cloud-drizzle cloud-fog cloud-hail cloud-lightning cloud-moon cloud-moon-rain cloud-rain cloud-rain-heavy cloud-rain-wind cloud-sleet cloud-snow cloud-snow-wind cloud-sun cloud-sun-rain clouds droplet · all weather icons

For agents

Metadata: /icons/uv-index.json · Markdown: /icons/uv-index.md · SVG: https://gentleface.com/svg/{style}/16/uv-index.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/uv-index.png

uv-index icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp