ACCIONES / REBOTE

Download bounce

Una flecha hacia abajo hace reconocible la acción de descargar un archivo.

Uso gratuito · CC0-1.0 ↗Crear una animación con este icono ↗

96 × 96 PX · SVG

Hazlo a tu manera

01 / ANIMACIÓN

Duración (ms)Retraso (ms)

Curva de velocidadRepeticiónDirecciónIntensidad del movimiento1.0×

02 / APARIENCIAColor#253E35Tamaño (px)Grosor del trazo1.7 px

Tus ajustes se guardan en este navegador. Sin cuenta ni pasos adicionales.

Tu SVG está listo.

AUTÓNOMO · SVG + CSS

Formato de código

<svg xmlns="http://www.w3.org/2000/svg" id="svg-download-bounce-ubqbfg" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="#253e35" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" role="img" aria-labelledby="svg-download-bounce-ubqbfg-title">
  <title id="svg-download-bounce-ubqbfg-title">Download bounce</title>
  <!-- Source: Motive Originals
Author: Motive project
Source page: /sources/original/
License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
Original project artwork, CC0-1.0. No attribution required. -->
  <style>@keyframes svg-download-bounce-ubqbfg-motion-0{0%{transform:translateY(0px)}25%{transform:translateY(-4px)}50%{transform:translateY(0px)}75%{transform:translateY(-1.5px)}100%{transform:translateY(0px)}}
#svg-download-bounce-ubqbfg [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-download-bounce-ubqbfg-motion-0;animation-duration:1000ms;animation-delay:0ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:both}
@media(prefers-reduced-motion:reduce){#svg-download-bounce-ubqbfg [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <path d="M12 3v12 M7 10l5 5 5-5 M4 17v4h16v-4"/>
  </g>
</svg>

Incluye animación CSS y compatibilidad con movimiento reducido. No requiere JavaScript ni archivos externos.

GIF: fondo blanco con espacio para el movimiento. Incluye los ajustes de color, tamaño, duración y repetición.

Ejemplo en una interfaz

Pulsa para repetir el icono y ver la respuesta de la interfaz. Demostración local que respeta la preferencia de movimiento reducido.

Respuesta a una acción

—

Un pequeño detalle, usado con cuidado.

Añade Descargar y muestra una confirmación cuando el archivo solicitado esté listo.

El movimiento debe acompañar la interfaz. Limita las repeticiones para confirmar acciones y muestra la información importante como texto. El SVG descargado respeta la preferencia de movimiento reducido de tus visitantes.

Cómo usar tu SVG ↗

Categoría: Acciones
Movimiento: Rebote
Lienzo: 24 × 24 viewBox
Licencia: CC0-1.0
Fuente: Motive OriginalsIlustración original del proyecto
Autor: Proyecto Motive
Etiquetas: guardar, archivo, exportar

Hazlo a tu manera

Tu SVG está listo.

Ejemplo en una interfaz

Respuesta a una acción

Un pequeño detalle, usado con cuidado.

Más iconos que podrían gustarte.

Bookmark bounce

Copy bounce

Filter draw

Link draw

Log in slide