PRO

Cogs

system-solid-40-cog-double

Change the settings and create brand-new worlds! With this animated icon, you can change the settings.

Edit and download ↗
Lottie, GIF, SVG, PNG, MOGRT, AEP
outline, solid
Cogs, Animated Icon, Solid

Animation

Animation type defines how and when the icon animates.

Cogs, Animated Icon, Solid hover-pinch

Hover

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

loop-cycle

Loop

Plays continuously in a repeating cycle. Perfect for loaders, ambient animations, or subtle decorative elements that should remain in motion without user interaction.

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!

Cogs, Animated Icon, Solid

Integrate anywhere:

About this icon

ID
40
Icon name
cog-double
Family
system
Style
solid
Plan type
PRO
Animation states
hover-pinch, loop-cycle
Category
Tags