Trash Bin

system-outline-185-trash-bin

Clean your life, mind and soul out of the clutter. This animated icon stands for a trash bin.

Edit and download ↗
Lottie, GIF, SVG, PNG, MOGRT, AEP
outline, solid
Trash Bin, Animated Icon, Outline

Animation

Animation type defines how and when the icon animates.

in-trash-empty

In

Plays when the icon appears. Perfect for project entrances such as page loads, success messages, or onboarding flows.

Trash Bin, Animated Icon, Outline hover-trash-empty
Trash Bin, Animated Icon, Outline hover-trash-full

Hover

Plays on hover interaction. Ideal for buttons, UI controls, or decorative elements that respond to user interaction.

morph-trash-full
morph-trash-full-to-empty

Morph

Plays as a smooth transformation between two forms. Ideal for illustrating change of system state, e.g. menu to close, toggles.

Icon in action

See how the icon actually shows up in the UI and what it does in real use.

Finding something iconic...

25
13
21
8
Add folder ⌘+D
Wallet ⌘+K
Download this S
Delete ⇧+V
Dog Avatar
Add comment...

Confirm action

Are you sure you want to continue? This action can be completed in just a few steps.

My notebook

21 lists

Simple use in WEB

Get started quickly with a simple package install or copy-paste setup. No complexity, just clean integration.

Install package

Install the package in your project.

npm install @lordicon/element
Set it up

Import and register the icon to make it available in your code.

import { defineElement } from "@lordicon/element";

// define "lord-icon" custom element with default properties
defineElement();
Use & Customize

Drop it into your HTML and adjust as you like!

Trash Bin, Animated Icon, Outline

Integrate anywhere:

About this icon

ID
185
Icon name
trash-bin
Family
system
Style
outline
Plan type
FREE
Animation states
in-trash-empty, hover-trash-empty, morph-trash-full, hover-trash-full, morph-trash-full-to-empty
Category
Tags