chakraui logo

chakraui-wordmark from Devicon by konpa · Wordmark · MIT Free for personal and commercial use.

Name: chakraui-wordmark
Set: Devicon
Style: Wordmark
Viewbox: 128×128
License: MIT

1 other variant in Devicon

The same logo in other sets

Use the chakraui logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><defs><linearGradient id="SVG5eS77dHI" x1="64" x2="64" y1="0" y2="128" gradientTransform="translate(0 47.45)scale(.25859)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7acbd4"/><stop offset="1" stop-color="#29c6b7"/></linearGradient></defs><path fill="#374152" d="M58.382 52.674v22.192h3.556V66.1c.061-1.9 1.134-3.372 3.096-3.372c2.238 0 3.065 1.471 3.065 3.31v8.828h3.556v-9.44c0-3.28-1.778-5.917-5.456-5.917c-1.564 0-3.25.552-4.261 1.87v-8.705zm31.463 0v22.192h3.525v-4.168l1.84-1.931l4.383 6.1h4.352l-6.253-8.614l6.13-6.314h-4.72l-5.732 6.038V52.674zm-40.352 6.805c-4.292 0-7.633 3.31-7.633 7.908c0 4.537 3.341 7.94 7.725 7.94c3.923 0 6.16-2.545 6.866-4.875l-3.127-1.134c-.337 1.134-1.41 2.759-3.74 2.759c-2.237 0-4.168-1.686-4.168-4.69s1.931-4.628 4.107-4.628c2.269 0 3.28 1.471 3.617 2.789l3.188-1.165c-.613-2.39-2.82-4.904-6.835-4.904m30.935 0c-3.678 0-6.008 2.299-6.284 4.873l3.25.736c.153-1.502 1.195-2.697 3.065-2.697c1.961 0 2.82 1.011 2.82 2.268c0 .521-.245.95-1.104 1.073l-3.831.582c-2.544.368-4.506 1.84-4.506 4.506c0 2.36 1.93 4.506 5.057 4.506c2.422 0 3.893-1.226 4.598-2.36c0 1.195.123 1.808.154 1.9h3.31c-.03-.153-.184-1.042-.184-2.39v-7.419c0-2.973-1.747-5.578-6.345-5.578m41.043 0c-3.678 0-6.008 2.299-6.284 4.873l3.25.736c.153-1.502 1.195-2.697 3.065-2.697c1.961 0 2.82 1.011 2.82 2.268c0 .521-.246.95-1.104 1.073l-3.831.582c-2.545.368-4.506 1.84-4.506 4.506c0 2.36 1.93 4.506 5.057 4.506c2.422 0 3.893-1.226 4.598-2.36c0 1.195.123 1.808.153 1.9H128c-.03-.153-.184-1.042-.184-2.39v-7.419c0-2.973-1.747-5.578-6.345-5.578m-8.393.276c-1.962 0-3.617.95-4.322 2.574v-2.39h-3.464v14.927h3.556v-7.11c0-2.79 1.257-4.384 4.016-4.384c.367 0 .766.03 1.164.092v-3.617a5 5 0 0 0-.95-.092M83.278 68v.674c0 2.912-1.716 3.863-3.708 3.863c-1.41 0-2.177-.92-2.177-1.931c0-1.227.89-1.84 1.993-2.023zm41.044 0v.674c0 2.912-1.717 3.863-3.71 3.863c-1.41 0-2.175-.92-2.175-1.931c0-1.227.888-1.84 1.992-2.023z"/><circle cx="16.55" cy="64" r="16.55" fill="url(#SVG5eS77dHI)"/><path fill="#fff" d="M24.194 62.42a.236.236 0 0 0-.174-.398h-7.245c-.443 0-.37-.238-.212-.528c.157-.292 4.165-7.602 4.165-7.602a.3.3 0 0 0 .029-.122a.28.28 0 0 0-.476-.199L8.921 64.892a.248.248 0 0 0 .17.43h7.75c.487 0 .314.279.195.442c-.12.162-5.987 8.274-5.987 8.274a.292.292 0 0 0 .233.468c.08 0 .153-.03.204-.082c.052-.052 12.705-11.994 12.705-11.994l.003-.002l.005-.005z"/></svg>

React

import type { SVGProps } from "react";

export function DeviconChakrauiWordmark(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><defs><linearGradient id="SVG5eS77dHI" x1="64" x2="64" y1="0" y2="128" gradientTransform="translate(0 47.45)scale(.25859)" gradientUnits="userSpaceOnUse"><stop offset="0" stopColor="#7acbd4"/><stop offset="1" stopColor="#29c6b7"/></linearGradient></defs><path fill="#374152" d="M58.382 52.674v22.192h3.556V66.1c.061-1.9 1.134-3.372 3.096-3.372c2.238 0 3.065 1.471 3.065 3.31v8.828h3.556v-9.44c0-3.28-1.778-5.917-5.456-5.917c-1.564 0-3.25.552-4.261 1.87v-8.705zm31.463 0v22.192h3.525v-4.168l1.84-1.931l4.383 6.1h4.352l-6.253-8.614l6.13-6.314h-4.72l-5.732 6.038V52.674zm-40.352 6.805c-4.292 0-7.633 3.31-7.633 7.908c0 4.537 3.341 7.94 7.725 7.94c3.923 0 6.16-2.545 6.866-4.875l-3.127-1.134c-.337 1.134-1.41 2.759-3.74 2.759c-2.237 0-4.168-1.686-4.168-4.69s1.931-4.628 4.107-4.628c2.269 0 3.28 1.471 3.617 2.789l3.188-1.165c-.613-2.39-2.82-4.904-6.835-4.904m30.935 0c-3.678 0-6.008 2.299-6.284 4.873l3.25.736c.153-1.502 1.195-2.697 3.065-2.697c1.961 0 2.82 1.011 2.82 2.268c0 .521-.245.95-1.104 1.073l-3.831.582c-2.544.368-4.506 1.84-4.506 4.506c0 2.36 1.93 4.506 5.057 4.506c2.422 0 3.893-1.226 4.598-2.36c0 1.195.123 1.808.154 1.9h3.31c-.03-.153-.184-1.042-.184-2.39v-7.419c0-2.973-1.747-5.578-6.345-5.578m41.043 0c-3.678 0-6.008 2.299-6.284 4.873l3.25.736c.153-1.502 1.195-2.697 3.065-2.697c1.961 0 2.82 1.011 2.82 2.268c0 .521-.246.95-1.104 1.073l-3.831.582c-2.545.368-4.506 1.84-4.506 4.506c0 2.36 1.93 4.506 5.057 4.506c2.422 0 3.893-1.226 4.598-2.36c0 1.195.123 1.808.153 1.9H128c-.03-.153-.184-1.042-.184-2.39v-7.419c0-2.973-1.747-5.578-6.345-5.578m-8.393.276c-1.962 0-3.617.95-4.322 2.574v-2.39h-3.464v14.927h3.556v-7.11c0-2.79 1.257-4.384 4.016-4.384c.367 0 .766.03 1.164.092v-3.617a5 5 0 0 0-.95-.092M83.278 68v.674c0 2.912-1.716 3.863-3.708 3.863c-1.41 0-2.177-.92-2.177-1.931c0-1.227.89-1.84 1.993-2.023zm41.044 0v.674c0 2.912-1.717 3.863-3.71 3.863c-1.41 0-2.175-.92-2.175-1.931c0-1.227.888-1.84 1.992-2.023z"/><circle cx="16.55" cy="64" r="16.55" fill="url(#SVG5eS77dHI)"/><path fill="#fff" d="M24.194 62.42a.236.236 0 0 0-.174-.398h-7.245c-.443 0-.37-.238-.212-.528c.157-.292 4.165-7.602 4.165-7.602a.3.3 0 0 0 .029-.122a.28.28 0 0 0-.476-.199L8.921 64.892a.248.248 0 0 0 .17.43h7.75c.487 0 .314.279.195.442c-.12.162-5.987 8.274-5.987 8.274a.292.292 0 0 0 .233.468c.08 0 .153-.03.204-.082c.052-.052 12.705-11.994 12.705-11.994l.003-.002l.005-.005z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><defs><linearGradient id="SVG5eS77dHI" x1="64" x2="64" y1="0" y2="128" gradientTransform="translate(0 47.45)scale(.25859)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7acbd4"/><stop offset="1" stop-color="#29c6b7"/></linearGradient></defs><path fill="#374152" d="M58.382 52.674v22.192h3.556V66.1c.061-1.9 1.134-3.372 3.096-3.372c2.238 0 3.065 1.471 3.065 3.31v8.828h3.556v-9.44c0-3.28-1.778-5.917-5.456-5.917c-1.564 0-3.25.552-4.261 1.87v-8.705zm31.463 0v22.192h3.525v-4.168l1.84-1.931l4.383 6.1h4.352l-6.253-8.614l6.13-6.314h-4.72l-5.732 6.038V52.674zm-40.352 6.805c-4.292 0-7.633 3.31-7.633 7.908c0 4.537 3.341 7.94 7.725 7.94c3.923 0 6.16-2.545 6.866-4.875l-3.127-1.134c-.337 1.134-1.41 2.759-3.74 2.759c-2.237 0-4.168-1.686-4.168-4.69s1.931-4.628 4.107-4.628c2.269 0 3.28 1.471 3.617 2.789l3.188-1.165c-.613-2.39-2.82-4.904-6.835-4.904m30.935 0c-3.678 0-6.008 2.299-6.284 4.873l3.25.736c.153-1.502 1.195-2.697 3.065-2.697c1.961 0 2.82 1.011 2.82 2.268c0 .521-.245.95-1.104 1.073l-3.831.582c-2.544.368-4.506 1.84-4.506 4.506c0 2.36 1.93 4.506 5.057 4.506c2.422 0 3.893-1.226 4.598-2.36c0 1.195.123 1.808.154 1.9h3.31c-.03-.153-.184-1.042-.184-2.39v-7.419c0-2.973-1.747-5.578-6.345-5.578m41.043 0c-3.678 0-6.008 2.299-6.284 4.873l3.25.736c.153-1.502 1.195-2.697 3.065-2.697c1.961 0 2.82 1.011 2.82 2.268c0 .521-.246.95-1.104 1.073l-3.831.582c-2.545.368-4.506 1.84-4.506 4.506c0 2.36 1.93 4.506 5.057 4.506c2.422 0 3.893-1.226 4.598-2.36c0 1.195.123 1.808.153 1.9H128c-.03-.153-.184-1.042-.184-2.39v-7.419c0-2.973-1.747-5.578-6.345-5.578m-8.393.276c-1.962 0-3.617.95-4.322 2.574v-2.39h-3.464v14.927h3.556v-7.11c0-2.79 1.257-4.384 4.016-4.384c.367 0 .766.03 1.164.092v-3.617a5 5 0 0 0-.95-.092M83.278 68v.674c0 2.912-1.716 3.863-3.708 3.863c-1.41 0-2.177-.92-2.177-1.931c0-1.227.89-1.84 1.993-2.023zm41.044 0v.674c0 2.912-1.717 3.863-3.71 3.863c-1.41 0-2.175-.92-2.175-1.931c0-1.227.888-1.84 1.992-2.023z"/><circle cx="16.55" cy="64" r="16.55" fill="url(#SVG5eS77dHI)"/><path fill="#fff" d="M24.194 62.42a.236.236 0 0 0-.174-.398h-7.245c-.443 0-.37-.238-.212-.528c.157-.292 4.165-7.602 4.165-7.602a.3.3 0 0 0 .029-.122a.28.28 0 0 0-.476-.199L8.921 64.892a.248.248 0 0 0 .17.43h7.75c.487 0 .314.279.195.442c-.12.162-5.987 8.274-5.987 8.274a.292.292 0 0 0 .233.468c.08 0 .153-.03.204-.082c.052-.052 12.705-11.994 12.705-11.994l.003-.002l.005-.005z"/></svg>
</template>

CSS

.icon-chakraui-wordmark {
  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%20128%20128%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG5eS77dHI%22%20x1%3D%2264%22%20x2%3D%2264%22%20y1%3D%220%22%20y2%3D%22128%22%20gradientTransform%3D%22translate(0%2047.45)scale(.25859)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%237acbd4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2329c6b7%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23374152%22%20d%3D%22M58.382%2052.674v22.192h3.556V66.1c.061-1.9%201.134-3.372%203.096-3.372c2.238%200%203.065%201.471%203.065%203.31v8.828h3.556v-9.44c0-3.28-1.778-5.917-5.456-5.917c-1.564%200-3.25.552-4.261%201.87v-8.705zm31.463%200v22.192h3.525v-4.168l1.84-1.931l4.383%206.1h4.352l-6.253-8.614l6.13-6.314h-4.72l-5.732%206.038V52.674zm-40.352%206.805c-4.292%200-7.633%203.31-7.633%207.908c0%204.537%203.341%207.94%207.725%207.94c3.923%200%206.16-2.545%206.866-4.875l-3.127-1.134c-.337%201.134-1.41%202.759-3.74%202.759c-2.237%200-4.168-1.686-4.168-4.69s1.931-4.628%204.107-4.628c2.269%200%203.28%201.471%203.617%202.789l3.188-1.165c-.613-2.39-2.82-4.904-6.835-4.904m30.935%200c-3.678%200-6.008%202.299-6.284%204.873l3.25.736c.153-1.502%201.195-2.697%203.065-2.697c1.961%200%202.82%201.011%202.82%202.268c0%20.521-.245.95-1.104%201.073l-3.831.582c-2.544.368-4.506%201.84-4.506%204.506c0%202.36%201.93%204.506%205.057%204.506c2.422%200%203.893-1.226%204.598-2.36c0%201.195.123%201.808.154%201.9h3.31c-.03-.153-.184-1.042-.184-2.39v-7.419c0-2.973-1.747-5.578-6.345-5.578m41.043%200c-3.678%200-6.008%202.299-6.284%204.873l3.25.736c.153-1.502%201.195-2.697%203.065-2.697c1.961%200%202.82%201.011%202.82%202.268c0%20.521-.246.95-1.104%201.073l-3.831.582c-2.545.368-4.506%201.84-4.506%204.506c0%202.36%201.93%204.506%205.057%204.506c2.422%200%203.893-1.226%204.598-2.36c0%201.195.123%201.808.153%201.9H128c-.03-.153-.184-1.042-.184-2.39v-7.419c0-2.973-1.747-5.578-6.345-5.578m-8.393.276c-1.962%200-3.617.95-4.322%202.574v-2.39h-3.464v14.927h3.556v-7.11c0-2.79%201.257-4.384%204.016-4.384c.367%200%20.766.03%201.164.092v-3.617a5%205%200%200%200-.95-.092M83.278%2068v.674c0%202.912-1.716%203.863-3.708%203.863c-1.41%200-2.177-.92-2.177-1.931c0-1.227.89-1.84%201.993-2.023zm41.044%200v.674c0%202.912-1.717%203.863-3.71%203.863c-1.41%200-2.175-.92-2.175-1.931c0-1.227.888-1.84%201.992-2.023z%22%2F%3E%3Ccircle%20cx%3D%2216.55%22%20cy%3D%2264%22%20r%3D%2216.55%22%20fill%3D%22url(%23SVG5eS77dHI)%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24.194%2062.42a.236.236%200%200%200-.174-.398h-7.245c-.443%200-.37-.238-.212-.528c.157-.292%204.165-7.602%204.165-7.602a.3.3%200%200%200%20.029-.122a.28.28%200%200%200-.476-.199L8.921%2064.892a.248.248%200%200%200%20.17.43h7.75c.487%200%20.314.279.195.442c-.12.162-5.987%208.274-5.987%208.274a.292.292%200%200%200%20.233.468c.08%200%20.153-.03.204-.082c.052-.052%2012.705-11.994%2012.705-11.994l.003-.002l.005-.005z%22%2F%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%20128%20128%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG5eS77dHI%22%20x1%3D%2264%22%20x2%3D%2264%22%20y1%3D%220%22%20y2%3D%22128%22%20gradientTransform%3D%22translate(0%2047.45)scale(.25859)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%237acbd4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2329c6b7%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23374152%22%20d%3D%22M58.382%2052.674v22.192h3.556V66.1c.061-1.9%201.134-3.372%203.096-3.372c2.238%200%203.065%201.471%203.065%203.31v8.828h3.556v-9.44c0-3.28-1.778-5.917-5.456-5.917c-1.564%200-3.25.552-4.261%201.87v-8.705zm31.463%200v22.192h3.525v-4.168l1.84-1.931l4.383%206.1h4.352l-6.253-8.614l6.13-6.314h-4.72l-5.732%206.038V52.674zm-40.352%206.805c-4.292%200-7.633%203.31-7.633%207.908c0%204.537%203.341%207.94%207.725%207.94c3.923%200%206.16-2.545%206.866-4.875l-3.127-1.134c-.337%201.134-1.41%202.759-3.74%202.759c-2.237%200-4.168-1.686-4.168-4.69s1.931-4.628%204.107-4.628c2.269%200%203.28%201.471%203.617%202.789l3.188-1.165c-.613-2.39-2.82-4.904-6.835-4.904m30.935%200c-3.678%200-6.008%202.299-6.284%204.873l3.25.736c.153-1.502%201.195-2.697%203.065-2.697c1.961%200%202.82%201.011%202.82%202.268c0%20.521-.245.95-1.104%201.073l-3.831.582c-2.544.368-4.506%201.84-4.506%204.506c0%202.36%201.93%204.506%205.057%204.506c2.422%200%203.893-1.226%204.598-2.36c0%201.195.123%201.808.154%201.9h3.31c-.03-.153-.184-1.042-.184-2.39v-7.419c0-2.973-1.747-5.578-6.345-5.578m41.043%200c-3.678%200-6.008%202.299-6.284%204.873l3.25.736c.153-1.502%201.195-2.697%203.065-2.697c1.961%200%202.82%201.011%202.82%202.268c0%20.521-.246.95-1.104%201.073l-3.831.582c-2.545.368-4.506%201.84-4.506%204.506c0%202.36%201.93%204.506%205.057%204.506c2.422%200%203.893-1.226%204.598-2.36c0%201.195.123%201.808.153%201.9H128c-.03-.153-.184-1.042-.184-2.39v-7.419c0-2.973-1.747-5.578-6.345-5.578m-8.393.276c-1.962%200-3.617.95-4.322%202.574v-2.39h-3.464v14.927h3.556v-7.11c0-2.79%201.257-4.384%204.016-4.384c.367%200%20.766.03%201.164.092v-3.617a5%205%200%200%200-.95-.092M83.278%2068v.674c0%202.912-1.716%203.863-3.708%203.863c-1.41%200-2.177-.92-2.177-1.931c0-1.227.89-1.84%201.993-2.023zm41.044%200v.674c0%202.912-1.717%203.863-3.71%203.863c-1.41%200-2.175-.92-2.175-1.931c0-1.227.888-1.84%201.992-2.023z%22%2F%3E%3Ccircle%20cx%3D%2216.55%22%20cy%3D%2264%22%20r%3D%2216.55%22%20fill%3D%22url(%23SVG5eS77dHI)%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24.194%2062.42a.236.236%200%200%200-.174-.398h-7.245c-.443%200-.37-.238-.212-.528c.157-.292%204.165-7.602%204.165-7.602a.3.3%200%200%200%20.029-.122a.28.28%200%200%200-.476-.199L8.921%2064.892a.248.248%200%200%200%20.17.43h7.75c.487%200%20.314.279.195.442c-.12.162-5.987%208.274-5.987%208.274a.292.292%200%200%200%20.233.468c.08%200%20.153-.03.204-.082c.052-.052%2012.705-11.994%2012.705-11.994l.003-.002l.005-.005z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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