ACCIONES / OSCILACIÓN

Trash ring

Una papelera oscila ligeramente para borrar y quitar elementos de una lista.

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-trash-ring-1wzl3hs" 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-trash-ring-1wzl3hs-title">
  <title id="svg-trash-ring-1wzl3hs-title">Trash ring</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-trash-ring-1wzl3hs-motion-0{0%{transform:rotate(0deg)}20%{transform:rotate(-18deg)}40%{transform:rotate(15deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(6deg)}100%{transform:rotate(0deg)}}
#svg-trash-ring-1wzl3hs [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-trash-ring-1wzl3hs-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-trash-ring-1wzl3hs [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <path d="M3 6h18 M9 6V3h6v3 M6 6l1 15h10l1-15 M10 10v7 M14 10v7"/>
  </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 una etiqueta clara de eliminación y mantén breve la animación de estas acciones.

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: Oscilación
Lienzo: 24 × 24 viewBox
Licencia: CC0-1.0
Fuente: Motive OriginalsIlustración original del proyecto
Autor: Proyecto Motive
Etiquetas: borrar, papelera, quitar

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