Skip to content
Ikions
Explore icons

Gradient icon

Apply a colour gradient that fades from one tone to another.

Gradient icon, outline24px × 4
16
20
24
32
48
Size
px
Colour
1.75

Use it in your project

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3"/>
  <path fill="currentColor" stroke="none" d="M6 3h2.5v18H6c-1.66 0-3-1.34-3-3V6c0-1.66 1.34-3 3-3"/>
  <circle cx="11" cy="7" r="1" fill="currentColor" stroke="none"/>
  <circle cx="11" cy="12" r="1" fill="currentColor" stroke="none"/>
  <circle cx="11" cy="17" r="1" fill="currentColor" stroke="none"/>
  <circle cx="14.25" cy="9.5" r="1" fill="currentColor" stroke="none"/>
  <circle cx="14.25" cy="14.5" r="1" fill="currentColor" stroke="none"/>
</svg>

Icon details

Name
gradient
Component
GradientIcon
Category
Editing & Creativity
Variants
Outline, Filled
Added in
v0.2.0
Files
@ikions/icons/outline/gradient.svg
@ikions/icons/filled/gradient.svg

Also known as

  • color-gradient
  • colour-gradient

Tags

Related icons