iteration icon

Iteration: iteration, iterate, loop step. 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="M5.854 14.146C5.953 14.246 6.003 14.364 6.003 14.5C6.003 14.636 5.953 14.754 5.854 14.854C5.756 14.951 5.638 15 5.5 15C5.362 15 5.244 14.951 5.146 14.854L2.146 11.854C2.047 11.754 1.997 11.636 1.997 11.5C1.997 11.364 2.047 11.246 2.146 11.146L5.146 8.146C5.244 8.049 5.362 8 5.5 8C5.638 8 5.756 8.049 5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854L3.707 11L7.5 11C8.084 11 8.646 10.891 9.187 10.672C9.777 10.433 10.292 10.086 10.735 9.628C11.177 9.171 11.507 8.644 11.726 8.047C11.926 7.499 12.017 6.933 11.997 6.35C11.978 5.767 11.85 5.208 11.613 4.675C11.355 4.093 10.99 3.589 10.519 3.163C10.047 2.736 9.509 2.423 8.905 2.225C8.35 2.043 7.782 1.971 7.2 2.01C6.617 2.049 6.064 2.196 5.538 2.45C4.966 2.727 4.474 3.109 4.064 3.594C3.653 4.08 3.359 4.628 3.18 5.239C3.017 5.799 2.964 6.369 3.023 6.95C3.036 7.087 3 7.21 2.912 7.316C2.825 7.423 2.712 7.484 2.575 7.497C2.438 7.511 2.316 7.475 2.209 7.387C2.102 7.3 2.041 7.187 2.028 7.05C1.956 6.34 2.021 5.643 2.22 4.958C2.438 4.212 2.798 3.542 3.3 2.949C3.802 2.355 4.403 1.889 5.103 1.55C5.745 1.239 6.421 1.06 7.133 1.012C7.845 0.965 8.539 1.052 9.217 1.275C9.955 1.518 10.613 1.9 11.19 2.421C11.766 2.943 12.212 3.559 12.527 4.269C12.817 4.921 12.973 5.604 12.997 6.316C13.021 7.029 12.91 7.721 12.665 8.39C12.398 9.12 11.994 9.765 11.453 10.324C10.913 10.882 10.282 11.308 9.562 11.599C8.901 11.866 8.213 12 7.5 12L3.707 12L5.854 14.146Z"/></svg>

React

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

export function IterationIcon(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="M5.854 14.146C5.953 14.246 6.003 14.364 6.003 14.5C6.003 14.636 5.953 14.754 5.854 14.854C5.756 14.951 5.638 15 5.5 15C5.362 15 5.244 14.951 5.146 14.854L2.146 11.854C2.047 11.754 1.997 11.636 1.997 11.5C1.997 11.364 2.047 11.246 2.146 11.146L5.146 8.146C5.244 8.049 5.362 8 5.5 8C5.638 8 5.756 8.049 5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854L3.707 11L7.5 11C8.084 11 8.646 10.891 9.187 10.672C9.777 10.433 10.292 10.086 10.735 9.628C11.177 9.171 11.507 8.644 11.726 8.047C11.926 7.499 12.017 6.933 11.997 6.35C11.978 5.767 11.85 5.208 11.613 4.675C11.355 4.093 10.99 3.589 10.519 3.163C10.047 2.736 9.509 2.423 8.905 2.225C8.35 2.043 7.782 1.971 7.2 2.01C6.617 2.049 6.064 2.196 5.538 2.45C4.966 2.727 4.474 3.109 4.064 3.594C3.653 4.08 3.359 4.628 3.18 5.239C3.017 5.799 2.964 6.369 3.023 6.95C3.036 7.087 3 7.21 2.912 7.316C2.825 7.423 2.712 7.484 2.575 7.497C2.438 7.511 2.316 7.475 2.209 7.387C2.102 7.3 2.041 7.187 2.028 7.05C1.956 6.34 2.021 5.643 2.22 4.958C2.438 4.212 2.798 3.542 3.3 2.949C3.802 2.355 4.403 1.889 5.103 1.55C5.745 1.239 6.421 1.06 7.133 1.012C7.845 0.965 8.539 1.052 9.217 1.275C9.955 1.518 10.613 1.9 11.19 2.421C11.766 2.943 12.212 3.559 12.527 4.269C12.817 4.921 12.973 5.604 12.997 6.316C13.021 7.029 12.91 7.721 12.665 8.39C12.398 9.12 11.994 9.765 11.453 10.324C10.913 10.882 10.282 11.308 9.562 11.599C8.901 11.866 8.213 12 7.5 12L3.707 12L5.854 14.146Z" />
    </svg>
  );
}

Vue

Vue: see /icons/iteration.md

Svelte

Svelte: see /icons/iteration.md

HTML img

HTML img: see /icons/iteration.md

CSS

CSS: see /icons/iteration.md

Data URL

Data URL: see /icons/iteration.md

Sprite

Sprite: see /icons/iteration.md

SwiftUI

SwiftUI: see /icons/iteration.md

Compose

Compose: see /icons/iteration.md

Android XML

Android XML: see /icons/iteration.md

Flutter

Flutter: see /icons/iteration.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.

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

Meaning

Use it for

iteration, iterate, loop step

Tags

iteration, iterate, loop, cycle, pass, step, sprint, repeat-once, round, circular-arrow, clockwise

Category

Arrows

Component name

IterationIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

Family 34

arrow-down arrow-down-from-line arrow-down-left arrow-down-right arrow-down-to-line arrow-left arrow-left-circle arrow-left-right arrow-left-to-line arrow-right arrow-right-circle arrow-right-to-line

More arrows icons

arrows-out chevron-down chevron-down-circle chevron-down-square chevron-down-triangle chevron-left chevron-left-circle chevron-left-square chevron-left-to-line chevron-left-triangle chevron-right chevron-right-circle chevron-right-square chevron-right-to-line chevron-right-triangle chevron-up · all arrows icons

For agents

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

iteration icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp