FreeFree to copy, with its sound.

Animated Info icon for React.

An info circle whose dot drops in and bounces while the stem draws itself.

Use it forHelp hint Callout box Form field guidance Learn more

Plays while the pointer is on the stage. Drag it and let go.

Trigger

Mood

Look

Colour

Size104Line2

Stage

What you hear. A little pop, a bubbly plip as the dot lands, a rising sweep as the stem draws, and a soft note. Every note lands on a beat of the animation.

Use it

Copy the file below into your project, then import it. This snippet follows everything you change on the stage.

TSXpage.tsx


1import { InfoIcon } from "@/components/icons/info";
2 
3export default function Page() {
4  return (
5    <InfoIcon size={104} accent="#0a84ff" />
6  );
7}

Spark just sets the accent prop, so the small details of each icon get their own colour.

Where to use the info icon

4 real places it fits, each one live. Hover, tap or press a key on a mock-up to see the icon move in context, then copy the file above and drop it in.

More info
Help hint
The dot lands and the stem draws in; use it for tooltips.
Heads upChanges apply to all projects.
Callout box
A neutral note in documentation.
3-20 chars
Form field guidance
Explains a field's rules.
Learn more
A link row to documentation.

More in context on the Made for real interfaces page: a player, a cart, a toolbar, a chat box and a tab bar.

The code

One file. Save it as components/icons/info.tsx, run npm i framer-motion, and import InfoIcon.


1"use client";
2 
3import { useState } from "react";
4import { motion, useReducedMotion } from "framer-motion";
5 
6export type InfoIconProps = {
7  /** Width and height in pixels. */
8  size?: number;
9  /** Line thickness, in a drawing that is 24 units wide. */
10  strokeWidth?: number;
11  className?: string;
12  /** Playback speed: 1 is the designed pace, 2 is twice as fast. */
13  speed?: number;
14  /** Colour of the icon's accent details, such as #0a84ff. Defaults to the icon's own colour. */
15  accent?: string;
16  /** Plays (true) or rests (false). Left out, it plays while the pointer is over it. */
17  play?: boolean;
18};
19 
20/** An info circle whose dot drops in and bounces while the stem draws itself. */
21export function InfoIcon({ size = 24, strokeWidth = 2, className, speed = 1, accent = "currentColor", play }: InfoIconProps) {
22  const reduce = useReducedMotion();
23  const [hover, setHover] = useState(false);
24  const on = !reduce && (play ?? hover);
25  return (
26    <svg
27      width={size}
28      height={size}
29      viewBox="0 0 24 24"
30      overflow="visible"
31      fill="none"
32      stroke="currentColor"
33      strokeWidth={strokeWidth}
34      strokeLinecap="round"
35      strokeLinejoin="round"
36      className={className}
37      onPointerEnter={() => setHover(true)}
38      onPointerLeave={() => setHover(false)}
39      aria-hidden="true"
40    >
41      <motion.circle
42        cx="12"
43        cy="12"
44        r="9"
45        initial={false}
46        animate={on ? { scale: [1, 1.1, 1] } : { scale: 1 }}
47        transition={{ duration: 0.4 / speed, ease: "easeOut" }}
48      />
49      <motion.circle
50        cx="12"
51        cy="7.9"
52        r="1.15"
53        fill={accent}
54        stroke="none"
55        initial={false}
56        animate={on ? { y: [-7, 0], opacity: [0, 1] } : { y: 0, opacity: 1 }}
57        transition={{ type: "spring", stiffness: 420 * speed * speed, damping: 12 * speed, delay: (on ? 0.08 : 0) / speed }}
58      />
59      <motion.path
60        d="M12 11.2v5.2"
61        stroke={accent}
62        initial={false}
63        animate={on ? { pathLength: [0, 1] } : { pathLength: 1 }}
64        transition={{ duration: 0.3 / speed, delay: (on ? 0.25 : 0) / speed }}
65      />
66    </svg>
67  );
68}
69

The sound (optional)

A little pop, a bubbly plip as the dot lands, a rising sweep as the stem draws, and a soft note. It is written against this icon's own animation: each line below is a note placed on a beat of the picture, and t() stretches it with the speed prop. There are no audio files: it is synthesised in the browser.

Once per project, copy sound-engine.ts and sound-kit.ts from the sound guide into components/icons/.
Save the score below as components/icons/sounds/info.ts.
Call playIconScore(info) from a click or hover handler:


1"use client";
2 
3import { InfoIcon } from "@/components/icons/info";
4import * as info from "@/components/icons/sounds/info";
5import { playIconScore } from "@/components/icons/sound-engine";
6 
7export function InfoButton() {
8  return (
9    <button
10      type="button"
11      onPointerEnter={() => playIconScore(info)}
12      onClick={() => playIconScore(info)}
13    >
14      <InfoIcon size={24} />
15    </button>
16  );
17}


1import { ding, plink, blip, swish, tick, N, type Time } from "../sound-kit";
2 
3/** How long it plays at normal speed, in seconds (for a loader, one lap). */
4export const length = 1.2;
5 
6/** How loud it is next to the other icons. Measured, so they all sound about equally loud. */
7export const level = 1.22;
8 
9/** A little pop, a bubbly plip as the dot lands, a rising sweep as the stem draws, and a soft note. */
10export function play(c: AudioContext, o: AudioNode, t: Time) {
11  blip(c, o, 520, t(0.02), 0.09, 0.1, 780);
12  plink(c, o, N.A5, t(0.2), 0.12);
13  tick(c, o, t(0.2), 0.08, 4200);
14  swish(c, o, t(0.26), t(0.28), 900, 2200, 0.025);
15  ding(c, o, N.E6, t(0.56), 0.07, 0.5);
16}
17

Props

Prop	Type	Default	What it does
size	number	24	Width and height in pixels.
strokeWidth	number	2	Line thickness, in a drawing that is 24 units wide.
speed	number	1	Playback speed: 1 is the designed pace, 2 is twice as fast, 0.5 is half.
accent	string	currentColor	Colour of the icon's small accent details (a badge, a spark, a trail). Left out, they match the icon.
className	string	–	Set a text colour here: the icon draws in currentColor.
play	boolean	–	true plays, false rests. Left out, it follows the pointer (or loops, for loaders).

Looks (optional)

Wrap an icon, or a whole grid of them, in IconMaterial to give it a finish: neon glow, an aurora spectrum, polished chrome, or one of the liquid looks (Mercury, Liquid and Glass), which are pure SVG with no canvas or WebGL and each make a sound of their own. Save it as components/icons/icon-material.tsx. Spark needs no helper: it is just the accent prop.


1"use client";
2 
3import { useId, type CSSProperties, type ReactNode } from "react";
4import { useReducedMotion } from "framer-motion";
5 
6export type IconMaterialName = "line" | "spark" | "neon" | "aurora" | "chrome" | "mercury" | "liquid" | "glass";
7 
8/**
9 * Looks for the icons: wrap one icon, or a whole grid of them, and they all take on the same finish.
10 *
11 *   line     plain strokes in the current colour (the default; nothing is added)
12 *   spark    strokes in the current colour, with each icon's small accent details in colour:
13 *            give the icons an `accent`, e.g. <BellIcon accent="#ff3b30" />
14 *   neon     a glow around every stroke, in the current colour
15 *   aurora   every stroke painted with a blue-to-orange spectrum
16 *   chrome   every stroke painted as polished metal (looks best on a dark background)
17 *   mercury  liquid metal: the strokes round and thicken into a lit tube, and a reflected room of light and
18 *            dark bands flows slowly along them (best on a dark background)
19 *   liquid   the strokes in the current colour as a wet droplet: where they touch they melt together, with a
20 *            glossy highlight, and the whole icon wobbles like jelly while the pointer is over it
21 *   glass    clear glass: a translucent body with a bright edge, a fringe of red and blue where the lens bends
22 *            the light, and a sheen that drifts across (best on a dark or colourful background)
23 *
24 * It only restyles, so it works with any icon that draws in currentColor and has a 24-unit viewBox. The three
25 * liquid looks are pure SVG (gradients and filters): no canvas, no WebGL, nothing to load, and they hold still
26 * for visitors who have reduced motion switched on.
27 */
28 
29const AURORA: [string, string][] = [["0", "#0090f7"], ["0.3", "#6e5bff"], ["0.55", "#ba62fc"], ["0.78", "#f2416b"], ["1", "#f55600"]];
30const CHROME: [string, string][] = [["0", "#f4f5fb"], ["0.22", "#9ea3b6"], ["0.38", "#ffffff"], ["0.55", "#6d7183"], ["0.72", "#e8e9f2"], ["0.84", "#ffe3b8"], ["1", "#bfc3d4"]];
31// The room mercury reflects, as one stripe of light: bright sky, soft grey, two hard dark bands and a warm window.
32// It starts and ends on the same colour so it can repeat and flow without a seam.
33const MERCURY: [string, string][] = [
34  ["0", "#f6f7fc"], ["0.12", "#d6d9e8"], ["0.26", "#8e93aa"], ["0.32", "#262833"], ["0.4", "#a4a9bf"], ["0.52", "#ffffff"],
35  ["0.6", "#646a80"], ["0.65", "#1c1e27"], ["0.73", "#cdd1e3"], ["0.85", "#ffe8c0"], ["1", "#f6f7fc"],
36];
37const GLASS: [string, string, number][] = [["0", "#ffffff", 0.95], ["0.35", "#e6f0ff", 0.55], ["0.7", "#cfe0ff", 0.3], ["1", "#ffffff", 0.7]];
38 
39export function IconMaterial({
40  material = "line",
41  color,
42  className,
43  style,
44  children,
45}: {
46  material?: IconMaterialName;
47  /** The current colour for everything inside. Left out, it inherits. */
48  color?: string;
49  className?: string;
50  style?: CSSProperties;
51  children: ReactNode;
52}) {
53  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
54  const scope = `nx-mat-${uid}`;
55  const reduce = useReducedMotion();
56  const flat = material === "aurora" || material === "chrome";
57  const stops = material === "aurora" ? AURORA : CHROME;
58  const liquidish = material === "mercury" || material === "liquid" || material === "glass";
59 
60  // An inline <style> (not a class in a stylesheet), so that url(#…) points into this page's own document.
61  // Filters go on each top-level shape of an icon (not the <svg>), so their units are the icon's own 24-unit grid
62  // and a look is the same size-for-size at 16px or 160px.
63  let css = "";
64  if (material === "neon") {
65    css = `.${scope} svg{filter:drop-shadow(0 0 1.5px currentColor) drop-shadow(0 0 6px currentColor)}`;
66  } else if (flat) {
67    css =
68      `.${scope} svg *:not([stroke="none"]){stroke:url(#${scope}) !important}` +
69      `.${scope} svg *[fill]:not([fill="none"]){fill:url(#${scope}) !important}` +
70      (material === "chrome" ? `.${scope} svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}` : "");
71  } else if (liquidish) {
72    css =
73      `.${scope} svg *:not([stroke="none"]){stroke:url(#${scope}) !important}` +
74      `.${scope} svg *[fill]:not([fill="none"]){fill:url(#${scope}) !important}` +
75      `.${scope} svg>*:not(defs){filter:url(#${scope}-f)}` +
76      (material === "liquid" && !reduce ? `.${scope} svg:hover>*:not(defs){filter:url(#${scope}-w)}` : "");
77  }
78 
79  const flow = !reduce && (material === "mercury" || material === "glass");
80 
81  return (
82    <div className={[scope, className].filter(Boolean).join(" ")} style={{ color, ...style }} data-material={material}>
83      {css ? <style>{css}</style> : null}
84      {flat ? (
85        <svg width="0" height="0" aria-hidden="true" style={{ position: "absolute" }} focusable="false">
86          <defs>
87            <linearGradient id={scope} gradientUnits="userSpaceOnUse" x1="3" y1="21" x2="21" y2="3">
88              {stops.map(([offset, c]) => (
89                <stop key={offset} offset={offset} stopColor={c} />
90              ))}
91            </linearGradient>
92          </defs>
93        </svg>
94      ) : null}
95 
96      {material === "mercury" ? (
97        <svg width="0" height="0" aria-hidden="true" style={{ position: "absolute" }} focusable="false">
98          <defs>
99            {/* one stripe of reflected room, repeated, so sliding it by one period loops without a seam */}
100            <linearGradient id={scope} gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="24" y2="0" spreadMethod="repeat">
101              {MERCURY.map(([offset, c]) => (
102                <stop key={offset} offset={offset} stopColor={c} />
103              ))}
104              {flow ? <animateTransform attributeName="gradientTransform" type="translate" from="0 0" to="24 -24" dur="7s" repeatCount="indefinite" /> : null}
105            </linearGradient>
106            <filter id={`${scope}-f`} filterUnits="userSpaceOnUse" x="-4" y="-4" width="32" height="32" colorInterpolationFilters="sRGB">
107              {/* round the strokes off and let touching ones melt together */}
108              <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="soft" />
109              <feColorMatrix in="soft" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 16 -6" result="shape" />
110              {/* a smooth height map of that shape, lit from the top left like a tube of metal */}
111              <feGaussianBlur in="shape" stdDeviation="0.65" result="relief" />
112              <feSpecularLighting in="relief" surfaceScale="2.6" specularConstant="1.2" specularExponent="28" lightingColor="#ffffff" result="shine">
113                <fePointLight x="3" y="0" z="13" />
114              </feSpecularLighting>
115              <feComposite in="shine" in2="shape" operator="in" result="glint" />
116              <feComposite in="SourceGraphic" in2="shape" operator="in" result="body" />
117              <feComposite in="body" in2="glint" operator="arithmetic" k1="0" k2="1" k3="0.9" k4="0" result="lit" />
118              <feDropShadow in="lit" dx="0" dy="0.5" stdDeviation="0.45" floodColor="#000000" floodOpacity="0.42" />
119            </filter>
120          </defs>
121        </svg>
122      ) : null}
123 
124      {material === "liquid" ? (
125        <svg width="0" height="0" aria-hidden="true" style={{ position: "absolute" }} focusable="false">
126          <defs>
127            <linearGradient id={scope} gradientUnits="userSpaceOnUse" x1="3" y1="3" x2="21" y2="21">
128              <stop offset="0" stopColor="currentColor" style={{ stopColor: "color-mix(in srgb, currentColor 55%, white)" }} />
129              <stop offset="0.5" stopColor="currentColor" />
130              <stop offset="1" stopColor="currentColor" style={{ stopColor: "color-mix(in srgb, currentColor 70%, black)" }} />
131            </linearGradient>
132            <filter id={`${scope}-f`} filterUnits="userSpaceOnUse" x="-4" y="-4" width="32" height="32" colorInterpolationFilters="sRGB">
133              <LiquidCore wobble={false} />
134            </filter>
135            <filter id={`${scope}-w`} filterUnits="userSpaceOnUse" x="-4" y="-4" width="32" height="32" colorInterpolationFilters="sRGB">
136              <LiquidCore wobble />
137            </filter>
138          </defs>
139        </svg>
140      ) : null}
141 
142      {material === "glass" ? (
143        <svg width="0" height="0" aria-hidden="true" style={{ position: "absolute" }} focusable="false">
144          <defs>
145            <linearGradient id={scope} gradientUnits="userSpaceOnUse" x1="0" y1="24" x2="24" y2="0" spreadMethod="repeat">
146              {GLASS.map(([offset, c, o]) => (
147                <stop key={offset} offset={offset} stopColor={c} stopOpacity={o} />
148              ))}
149              {flow ? <animateTransform attributeName="gradientTransform" type="translate" from="0 0" to="24 -24" dur="9s" repeatCount="indefinite" /> : null}
150            </linearGradient>
151            <filter id={`${scope}-f`} filterUnits="userSpaceOnUse" x="-4" y="-4" width="32" height="32" colorInterpolationFilters="sRGB">
152              {/* a bright rim where the glass catches the light */}
153              <feGaussianBlur in="SourceAlpha" stdDeviation="0.3" result="soft" />
154              <feSpecularLighting in="soft" surfaceScale="2" specularConstant="1" specularExponent="13" lightingColor="#ffffff" result="rim">
155                <fePointLight x="2" y="0" z="9" />
156              </feSpecularLighting>
157              <feComposite in="rim" in2="SourceAlpha" operator="in" result="edge" />
158              {/* the lens bends red and blue light apart: a fringe on each side of every stroke */}
159              <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="red" />
160              <feOffset in="red" dx="-0.32" dy="0" result="redShift" />
161              <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" result="green" />
162              <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" result="blue" />
163              <feOffset in="blue" dx="0.32" dy="0" result="blueShift" />
164              <feBlend in="redShift" in2="green" mode="screen" result="rg" />
165              <feBlend in="rg" in2="blueShift" mode="screen" result="split" />
166              <feComposite in="edge" in2="split" operator="arithmetic" k1="0" k2="0.9" k3="1" k4="0" result="glass" />
167              <feDropShadow in="glass" dx="0" dy="0.6" stdDeviation="0.55" floodColor="#0a1030" floodOpacity="0.5" />
168            </filter>
169          </defs>
170        </svg>
171      ) : null}
172 
173      {children}
174    </div>
175  );
176}
177 
178/** The shared part of the liquid filter: melt, light, and (on hover) a slow jelly wobble. */
179function LiquidCore({ wobble }: { wobble: boolean }) {
180  return (
181    <>
182      {wobble ? (
183        <>
184          <feTurbulence type="fractalNoise" baseFrequency="0.05 0.07" numOctaves="1" seed="3" result="noise">
185            <animate attributeName="baseFrequency" values="0.05 0.07;0.08 0.05;0.05 0.07" dur="2.6s" repeatCount="indefinite" />
186          </feTurbulence>
187          <feDisplacementMap in="SourceGraphic" in2="noise" scale="1.1" xChannelSelector="R" yChannelSelector="G" result="wobbled" />
188        </>
189      ) : null}
190      <feGaussianBlur in={wobble ? "wobbled" : "SourceGraphic"} stdDeviation="0.7" result="soft" />
191      <feColorMatrix in="soft" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -9" result="melted" />
192      <feGaussianBlur in="melted" stdDeviation="0.7" result="relief" />
193      <feSpecularLighting in="relief" surfaceScale="3" specularConstant="1.3" specularExponent="18" lightingColor="#ffffff" result="wet">
194        <fePointLight x="4" y="0" z="10" />
195      </feSpecularLighting>
196      <feComposite in="wet" in2="melted" operator="in" result="gloss" />
197      <feComposite in="melted" in2="gloss" operator="arithmetic" k1="0" k2="1" k3="0.95" k4="0" result="lit" />
198      <feDropShadow in="lit" dx="0" dy="0.55" stdDeviation="0.5" floodColor="currentColor" floodOpacity="0.45" />
199    </>
200  );
201}
202

More interface icons

All animated icons ›

Questions about the info icon

How do I use the info icon in React?

Copy info.tsx into your project, install framer-motion, and import InfoIcon. Render it like any component: <InfoIcon size={32} />.

Where can I use the info icon?

help hint, callout box, form field guidance, learn more. Each one is shown live on this page.

Is the info icon free?

Yes. The info icon is one of the 75 free icons: copy its file and sound and use them in personal, commercial and client projects.

Does it need a library?

Only Framer Motion, which draws the animation. The icon itself is one file of plain SVG and React, with no other dependencies.

Can I change the size and colour?

Yes. Set size (in pixels) and strokeWidth as props. The icon draws in currentColor, so a text colour class on it, or on a parent, changes its colour.

Does the info icon make a sound?

Yes, optionally: A little pop, a bubbly plip as the dot lands, a rising sweep as the stem draws, and a soft note. The sound is scored against the icon's own animation, so every note lands on a beat of the picture, and it follows the speed prop. It plays only if you call it, and it follows the visitor's sound setting.

What happens with reduced motion?

When the visitor has reduced motion switched on in their system, the icon does not animate. It stays in its resting pose.