Gentleface › Arrows › refresh-sparkle

refresh-sparkle icon

Refresh sparkle: regenerate, regenerate response, regenerate answer, generate again. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

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="M13.856 5.856C13.759 5.952 13.641 6 13.5 6L9.5 6C9.359 6 9.241 5.952 9.144 5.856C9.048 5.759 9 5.641 9 5.5C9 5.359 9.048 5.241 9.144 5.144C9.241 5.048 9.359 5 9.5 5L12.293 5L11.146 3.854C10.939 3.646 10.724 3.482 10.503 3.361C10.301 3.251 10.076 3.168 9.829 3.113C9.605 3.063 9.333 3.031 9.015 3.015C8.809 3.005 8.471 3 8 3C7.364 3 6.751 3.117 6.16 3.351C5.518 3.605 4.953 3.976 4.464 4.464C3.976 4.953 3.605 5.518 3.351 6.16C3.117 6.751 3 7.364 3 8C3 8.636 3.117 9.249 3.351 9.84C3.605 10.482 3.976 11.047 4.464 11.536C4.953 12.024 5.518 12.395 6.16 12.649C6.751 12.883 7.364 13 8 13C8.209 13 8.417 12.987 8.623 12.961C8.882 13.073 9.105 13.204 9.293 13.353C9.293 13.358 9.294 13.363 9.295 13.369C9.316 13.508 9.285 13.632 9.204 13.742C9.123 13.851 9.013 13.916 8.873 13.936C8.584 13.979 8.293 14 8 14C7.237 14 6.501 13.86 5.791 13.579C5.021 13.274 4.343 12.828 3.757 12.243C3.172 11.657 2.726 10.979 2.421 10.209C2.14 9.499 2 8.763 2 8C2 7.237 2.14 6.501 2.421 5.791C2.726 5.021 3.172 4.343 3.757 3.757C4.343 3.172 5.021 2.726 5.791 2.421C6.501 2.14 7.237 2 8 2C8.487 2 8.842 2.005 9.063 2.016C9.439 2.035 9.766 2.075 10.046 2.137C10.73 2.289 11.333 2.625 11.854 3.146L13 4.293L13 1.5C13 1.359 13.048 1.241 13.144 1.144C13.241 1.048 13.359 1 13.5 1C13.641 1 13.759 1.048 13.856 1.144C13.952 1.241 14 1.359 14 1.5L14 5.5C14 5.641 13.952 5.759 13.856 5.856ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z"/></svg>

React

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

export function RefreshSparkleIcon(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="M13.856 5.856C13.759 5.952 13.641 6 13.5 6L9.5 6C9.359 6 9.241 5.952 9.144 5.856C9.048 5.759 9 5.641 9 5.5C9 5.359 9.048 5.241 9.144 5.144C9.241 5.048 9.359 5 9.5 5L12.293 5L11.146 3.854C10.939 3.646 10.724 3.482 10.503 3.361C10.301 3.251 10.076 3.168 9.829 3.113C9.605 3.063 9.333 3.031 9.015 3.015C8.809 3.005 8.471 3 8 3C7.364 3 6.751 3.117 6.16 3.351C5.518 3.605 4.953 3.976 4.464 4.464C3.976 4.953 3.605 5.518 3.351 6.16C3.117 6.751 3 7.364 3 8C3 8.636 3.117 9.249 3.351 9.84C3.605 10.482 3.976 11.047 4.464 11.536C4.953 12.024 5.518 12.395 6.16 12.649C6.751 12.883 7.364 13 8 13C8.209 13 8.417 12.987 8.623 12.961C8.882 13.073 9.105 13.204 9.293 13.353C9.293 13.358 9.294 13.363 9.295 13.369C9.316 13.508 9.285 13.632 9.204 13.742C9.123 13.851 9.013 13.916 8.873 13.936C8.584 13.979 8.293 14 8 14C7.237 14 6.501 13.86 5.791 13.579C5.021 13.274 4.343 12.828 3.757 12.243C3.172 11.657 2.726 10.979 2.421 10.209C2.14 9.499 2 8.763 2 8C2 7.237 2.14 6.501 2.421 5.791C2.726 5.021 3.172 4.343 3.757 3.757C4.343 3.172 5.021 2.726 5.791 2.421C6.501 2.14 7.237 2 8 2C8.487 2 8.842 2.005 9.063 2.016C9.439 2.035 9.766 2.075 10.046 2.137C10.73 2.289 11.333 2.625 11.854 3.146L13 4.293L13 1.5C13 1.359 13.048 1.241 13.144 1.144C13.241 1.048 13.359 1 13.5 1C13.641 1 13.759 1.048 13.856 1.144C13.952 1.241 14 1.359 14 1.5L14 5.5C14 5.641 13.952 5.759 13.856 5.856ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z" />
    </svg>
  );
}

Vue

Vue: see /icons/refresh-sparkle.md

Svelte

Svelte: see /icons/refresh-sparkle.md

HTML img

HTML img: see /icons/refresh-sparkle.md

CSS

CSS: see /icons/refresh-sparkle.md

Data URL

Data URL: see /icons/refresh-sparkle.md

Sprite

Sprite: see /icons/refresh-sparkle.md

SwiftUI

SwiftUI: see /icons/refresh-sparkle.md

Compose

Compose: see /icons/refresh-sparkle.md

Android XML

Android XML: see /icons/refresh-sparkle.md

Flutter

Flutter: see /icons/refresh-sparkle.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. 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.

Meaning

Use it for

regenerate, regenerate response, regenerate answer, generate again

Example

Regenerate an AI cell next to Refresh data

Alternatives

refresh: under an AI answer the bare refresh is enough

Built from

refresh + sparkle

Tags

reload, rotate, clockwise, circular-arrow, sparkle

Category

Arrows

Component name

RefreshSparkleIcon

History

2026-10-15 added

Family 1

refresh

More arrows icons

arrow-down arrow-down-left arrow-down-right arrow-down-to-line arrow-left arrow-left-right arrow-left-to-line arrow-right arrow-right-to-line arrow-up arrow-up-down arrow-up-left arrow-up-right arrow-up-to-line arrows-out chevron-down · all arrows icons

For agents

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

refresh-sparkle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp