stability logo

stability-color from LobeHub AI Icons by LobeHub · Color · MIT Free for personal and commercial use.

Name
stability-color
Set
LobeHub AI Icons
Style
Color
Viewbox
24×24
License
MIT

4 other variants in LobeHub AI Icons

stabilitystability-brandstability-brand-colorstability-text

Use the stability logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID21)" d="M7.223 21c4.252 0 7.018-2.22 7.018-5.56 0-2.59-1.682-4.236-4.69-4.918l-1.93-.571c-1.694-.375-2.683-.825-2.45-1.975.194-.957.773-1.497 2.122-1.497 4.285 0 5.873 1.497 5.873 1.497v-3.6S11.62 3 7.293 3C3.213 3 1 5.07 1 8.273c0 2.59 1.534 4.097 4.645 4.812l.334.083c.473.144 1.112.335 1.916.572 1.59.375 1.999.773 1.999 1.966 0 1.09-1.15 1.71-2.67 1.71C2.841 17.416 1 15.231 1 15.231v3.989S2.152 21 7.223 21z"/><path fill="#e80000" d="M20.374 20.73c1.505 0 2.626-1.073 2.626-2.526 0-1.484-1.089-2.526-2.626-2.526-1.505 0-2.594 1.042-2.594 2.526 0 1.484 1.089 2.526 2.594 2.526z"/><defs><linearGradient id="svgID21" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#9d39ff"/><stop offset="100%" stop-color="#a380ff"/></linearGradient></defs></svg>

React

import type { SVGProps } from "react";

export function LobehubStabilityColor(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID21)" d="M7.223 21c4.252 0 7.018-2.22 7.018-5.56 0-2.59-1.682-4.236-4.69-4.918l-1.93-.571c-1.694-.375-2.683-.825-2.45-1.975.194-.957.773-1.497 2.122-1.497 4.285 0 5.873 1.497 5.873 1.497v-3.6S11.62 3 7.293 3C3.213 3 1 5.07 1 8.273c0 2.59 1.534 4.097 4.645 4.812l.334.083c.473.144 1.112.335 1.916.572 1.59.375 1.999.773 1.999 1.966 0 1.09-1.15 1.71-2.67 1.71C2.841 17.416 1 15.231 1 15.231v3.989S2.152 21 7.223 21z"/><path fill="#e80000" d="M20.374 20.73c1.505 0 2.626-1.073 2.626-2.526 0-1.484-1.089-2.526-2.626-2.526-1.505 0-2.594 1.042-2.594 2.526 0 1.484 1.089 2.526 2.594 2.526z"/><defs><linearGradient id="svgID21" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stopColor="#9d39ff"/><stop offset="100%" stopColor="#a380ff"/></linearGradient></defs></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="url(#svgID21)" d="M7.223 21c4.252 0 7.018-2.22 7.018-5.56 0-2.59-1.682-4.236-4.69-4.918l-1.93-.571c-1.694-.375-2.683-.825-2.45-1.975.194-.957.773-1.497 2.122-1.497 4.285 0 5.873 1.497 5.873 1.497v-3.6S11.62 3 7.293 3C3.213 3 1 5.07 1 8.273c0 2.59 1.534 4.097 4.645 4.812l.334.083c.473.144 1.112.335 1.916.572 1.59.375 1.999.773 1.999 1.966 0 1.09-1.15 1.71-2.67 1.71C2.841 17.416 1 15.231 1 15.231v3.989S2.152 21 7.223 21z"/><path fill="#e80000" d="M20.374 20.73c1.505 0 2.626-1.073 2.626-2.526 0-1.484-1.089-2.526-2.626-2.526-1.505 0-2.594 1.042-2.594 2.526 0 1.484 1.089 2.526 2.594 2.526z"/><defs><linearGradient id="svgID21" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#9d39ff"/><stop offset="100%" stop-color="#a380ff"/></linearGradient></defs></svg>
</template>

CSS

.icon-stability-color {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22url(%23svgID21)%22%20d%3D%22M7.223%2021c4.252%200%207.018-2.22%207.018-5.56%200-2.59-1.682-4.236-4.69-4.918l-1.93-.571c-1.694-.375-2.683-.825-2.45-1.975.194-.957.773-1.497%202.122-1.497%204.285%200%205.873%201.497%205.873%201.497v-3.6S11.62%203%207.293%203C3.213%203%201%205.07%201%208.273c0%202.59%201.534%204.097%204.645%204.812l.334.083c.473.144%201.112.335%201.916.572%201.59.375%201.999.773%201.999%201.966%200%201.09-1.15%201.71-2.67%201.71C2.841%2017.416%201%2015.231%201%2015.231v3.989S2.152%2021%207.223%2021z%22%2F%3E%3Cpath%20fill%3D%22%23e80000%22%20d%3D%22M20.374%2020.73c1.505%200%202.626-1.073%202.626-2.526%200-1.484-1.089-2.526-2.626-2.526-1.505%200-2.594%201.042-2.594%202.526%200%201.484%201.089%202.526%202.594%202.526z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgID21%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%239d39ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23a380ff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22url(%23svgID21)%22%20d%3D%22M7.223%2021c4.252%200%207.018-2.22%207.018-5.56%200-2.59-1.682-4.236-4.69-4.918l-1.93-.571c-1.694-.375-2.683-.825-2.45-1.975.194-.957.773-1.497%202.122-1.497%204.285%200%205.873%201.497%205.873%201.497v-3.6S11.62%203%207.293%203C3.213%203%201%205.07%201%208.273c0%202.59%201.534%204.097%204.645%204.812l.334.083c.473.144%201.112.335%201.916.572%201.59.375%201.999.773%201.999%201.966%200%201.09-1.15%201.71-2.67%201.71C2.841%2017.416%201%2015.231%201%2015.231v3.989S2.152%2021%207.223%2021z%22%2F%3E%3Cpath%20fill%3D%22%23e80000%22%20d%3D%22M20.374%2020.73c1.505%200%202.626-1.073%202.626-2.526%200-1.484-1.089-2.526-2.626-2.526-1.505%200-2.594%201.042-2.594%202.526%200%201.484%201.089%202.526%202.594%202.526z%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22svgID21%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%239d39ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23a380ff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/lobehub/stability-color.svg?color=%231a73e8&size=48