ACCIONES / DESPLAZAMIENTO

Log in slide

Una flecha hacia dentro se mueve ligeramente para iniciar sesión o entrar en un espacio de trabajo.

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-log-in-slide-12m1mur" 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-log-in-slide-12m1mur-title">
  <title id="svg-log-in-slide-12m1mur-title">Log in slide</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-log-in-slide-12m1mur-motion-0{0%{transform:translateX(0px)}50%{transform:translateX(3px)}100%{transform:translateX(0px)}}
#svg-log-in-slide-12m1mur [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-log-in-slide-12m1mur-motion-0;animation-duration:1200ms;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-log-in-slide-12m1mur [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <path d="M14 4h6v16h-6 M3 12h12 M10 7l5 5-5 5"/>
  </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 Iniciar sesión y explica qué cuenta o espacio se abre.

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: Desplazamiento
Lienzo: 24 × 24 viewBox
Licencia: CC0-1.0
Fuente: Motive OriginalsIlustración original del proyecto
Autor: Proyecto Motive
Etiquetas: iniciar sesión, entrar, inicio de sesión

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

Download bounce

Filter draw

Link draw