clarity logo

clarity from Devicon by konpa · Original · MIT Free for personal and commercial use.

Name: clarity
Set: Devicon
Style: Original
Viewbox: 128×128
License: MIT

1 other variant in Devicon

Use the clarity logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#13171a" d="M86.987 0H41.013C18.437 0 .136 18.34.136 40.964v46.072C.136 109.659 18.438 128 41.013 128h45.974c22.576 0 40.877-18.34 40.877-40.964V40.964C127.864 18.34 109.563 0 86.987 0"/><path fill="#7e858b" d="M38.497 31.809a18.27 18.27 0 0 1 13.24-4.71v6.07a11.17 11.17 0 0 0-8.573 3.317a15.98 15.98 0 0 0-2.913 10.382v34.13a15.98 15.98 0 0 0 2.913 10.383a11.08 11.08 0 0 0 8.771 3.616v5.937a18.27 18.27 0 0 1-13.24-4.744a19.5 19.5 0 0 1-4.865-14.627V46.437a19.6 19.6 0 0 1 4.667-14.628"/><path fill="#f7f8f9" d="M59.714 31.809a18.35 18.35 0 0 1 13.239-4.71v6.07a11.23 11.23 0 0 0-8.606 3.317a15.98 15.98 0 0 0-2.88 10.382v34.13a15.98 15.98 0 0 0 2.88 10.383a11.15 11.15 0 0 0 8.772 3.615v5.938a18.34 18.34 0 0 1-13.406-4.744a19.5 19.5 0 0 1-3.918-6.815a19.5 19.5 0 0 1-.914-7.812V46.437a19.57 19.57 0 0 1 4.832-14.628z"/><path fill="#7e858b" d="M80.997 31.809a18.38 18.38 0 0 1 13.239-4.71v6.07a11.27 11.27 0 0 0-8.638 3.317A15.98 15.98 0 0 0 82.883 47v33.998c-.27 3.69.748 7.36 2.88 10.382a11.19 11.19 0 0 0 8.77 3.615v5.938a18.4 18.4 0 0 1-13.238-4.744a19.67 19.67 0 0 1-5.03-14.627V46.434a19.7 19.7 0 0 1 4.732-14.627z"/></svg>

React

import type { SVGProps } from "react";

export function DeviconClarity(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#13171a" d="M86.987 0H41.013C18.437 0 .136 18.34.136 40.964v46.072C.136 109.659 18.438 128 41.013 128h45.974c22.576 0 40.877-18.34 40.877-40.964V40.964C127.864 18.34 109.563 0 86.987 0"/><path fill="#7e858b" d="M38.497 31.809a18.27 18.27 0 0 1 13.24-4.71v6.07a11.17 11.17 0 0 0-8.573 3.317a15.98 15.98 0 0 0-2.913 10.382v34.13a15.98 15.98 0 0 0 2.913 10.383a11.08 11.08 0 0 0 8.771 3.616v5.937a18.27 18.27 0 0 1-13.24-4.744a19.5 19.5 0 0 1-4.865-14.627V46.437a19.6 19.6 0 0 1 4.667-14.628"/><path fill="#f7f8f9" d="M59.714 31.809a18.35 18.35 0 0 1 13.239-4.71v6.07a11.23 11.23 0 0 0-8.606 3.317a15.98 15.98 0 0 0-2.88 10.382v34.13a15.98 15.98 0 0 0 2.88 10.383a11.15 11.15 0 0 0 8.772 3.615v5.938a18.34 18.34 0 0 1-13.406-4.744a19.5 19.5 0 0 1-3.918-6.815a19.5 19.5 0 0 1-.914-7.812V46.437a19.57 19.57 0 0 1 4.832-14.628z"/><path fill="#7e858b" d="M80.997 31.809a18.38 18.38 0 0 1 13.239-4.71v6.07a11.27 11.27 0 0 0-8.638 3.317A15.98 15.98 0 0 0 82.883 47v33.998c-.27 3.69.748 7.36 2.88 10.382a11.19 11.19 0 0 0 8.77 3.615v5.938a18.4 18.4 0 0 1-13.238-4.744a19.67 19.67 0 0 1-5.03-14.627V46.434a19.7 19.7 0 0 1 4.732-14.627z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#13171a" d="M86.987 0H41.013C18.437 0 .136 18.34.136 40.964v46.072C.136 109.659 18.438 128 41.013 128h45.974c22.576 0 40.877-18.34 40.877-40.964V40.964C127.864 18.34 109.563 0 86.987 0"/><path fill="#7e858b" d="M38.497 31.809a18.27 18.27 0 0 1 13.24-4.71v6.07a11.17 11.17 0 0 0-8.573 3.317a15.98 15.98 0 0 0-2.913 10.382v34.13a15.98 15.98 0 0 0 2.913 10.383a11.08 11.08 0 0 0 8.771 3.616v5.937a18.27 18.27 0 0 1-13.24-4.744a19.5 19.5 0 0 1-4.865-14.627V46.437a19.6 19.6 0 0 1 4.667-14.628"/><path fill="#f7f8f9" d="M59.714 31.809a18.35 18.35 0 0 1 13.239-4.71v6.07a11.23 11.23 0 0 0-8.606 3.317a15.98 15.98 0 0 0-2.88 10.382v34.13a15.98 15.98 0 0 0 2.88 10.383a11.15 11.15 0 0 0 8.772 3.615v5.938a18.34 18.34 0 0 1-13.406-4.744a19.5 19.5 0 0 1-3.918-6.815a19.5 19.5 0 0 1-.914-7.812V46.437a19.57 19.57 0 0 1 4.832-14.628z"/><path fill="#7e858b" d="M80.997 31.809a18.38 18.38 0 0 1 13.239-4.71v6.07a11.27 11.27 0 0 0-8.638 3.317A15.98 15.98 0 0 0 82.883 47v33.998c-.27 3.69.748 7.36 2.88 10.382a11.19 11.19 0 0 0 8.77 3.615v5.938a18.4 18.4 0 0 1-13.238-4.744a19.67 19.67 0 0 1-5.03-14.627V46.434a19.7 19.7 0 0 1 4.732-14.627z"/></svg>
</template>

CSS

.icon-clarity {
  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%3Cpath%20fill%3D%22%2313171a%22%20d%3D%22M86.987%200H41.013C18.437%200%20.136%2018.34.136%2040.964v46.072C.136%20109.659%2018.438%20128%2041.013%20128h45.974c22.576%200%2040.877-18.34%2040.877-40.964V40.964C127.864%2018.34%20109.563%200%2086.987%200%22%2F%3E%3Cpath%20fill%3D%22%237e858b%22%20d%3D%22M38.497%2031.809a18.27%2018.27%200%200%201%2013.24-4.71v6.07a11.17%2011.17%200%200%200-8.573%203.317a15.98%2015.98%200%200%200-2.913%2010.382v34.13a15.98%2015.98%200%200%200%202.913%2010.383a11.08%2011.08%200%200%200%208.771%203.616v5.937a18.27%2018.27%200%200%201-13.24-4.744a19.5%2019.5%200%200%201-4.865-14.627V46.437a19.6%2019.6%200%200%201%204.667-14.628%22%2F%3E%3Cpath%20fill%3D%22%23f7f8f9%22%20d%3D%22M59.714%2031.809a18.35%2018.35%200%200%201%2013.239-4.71v6.07a11.23%2011.23%200%200%200-8.606%203.317a15.98%2015.98%200%200%200-2.88%2010.382v34.13a15.98%2015.98%200%200%200%202.88%2010.383a11.15%2011.15%200%200%200%208.772%203.615v5.938a18.34%2018.34%200%200%201-13.406-4.744a19.5%2019.5%200%200%201-3.918-6.815a19.5%2019.5%200%200%201-.914-7.812V46.437a19.57%2019.57%200%200%201%204.832-14.628z%22%2F%3E%3Cpath%20fill%3D%22%237e858b%22%20d%3D%22M80.997%2031.809a18.38%2018.38%200%200%201%2013.239-4.71v6.07a11.27%2011.27%200%200%200-8.638%203.317A15.98%2015.98%200%200%200%2082.883%2047v33.998c-.27%203.69.748%207.36%202.88%2010.382a11.19%2011.19%200%200%200%208.77%203.615v5.938a18.4%2018.4%200%200%201-13.238-4.744a19.67%2019.67%200%200%201-5.03-14.627V46.434a19.7%2019.7%200%200%201%204.732-14.627z%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%3Cpath%20fill%3D%22%2313171a%22%20d%3D%22M86.987%200H41.013C18.437%200%20.136%2018.34.136%2040.964v46.072C.136%20109.659%2018.438%20128%2041.013%20128h45.974c22.576%200%2040.877-18.34%2040.877-40.964V40.964C127.864%2018.34%20109.563%200%2086.987%200%22%2F%3E%3Cpath%20fill%3D%22%237e858b%22%20d%3D%22M38.497%2031.809a18.27%2018.27%200%200%201%2013.24-4.71v6.07a11.17%2011.17%200%200%200-8.573%203.317a15.98%2015.98%200%200%200-2.913%2010.382v34.13a15.98%2015.98%200%200%200%202.913%2010.383a11.08%2011.08%200%200%200%208.771%203.616v5.937a18.27%2018.27%200%200%201-13.24-4.744a19.5%2019.5%200%200%201-4.865-14.627V46.437a19.6%2019.6%200%200%201%204.667-14.628%22%2F%3E%3Cpath%20fill%3D%22%23f7f8f9%22%20d%3D%22M59.714%2031.809a18.35%2018.35%200%200%201%2013.239-4.71v6.07a11.23%2011.23%200%200%200-8.606%203.317a15.98%2015.98%200%200%200-2.88%2010.382v34.13a15.98%2015.98%200%200%200%202.88%2010.383a11.15%2011.15%200%200%200%208.772%203.615v5.938a18.34%2018.34%200%200%201-13.406-4.744a19.5%2019.5%200%200%201-3.918-6.815a19.5%2019.5%200%200%201-.914-7.812V46.437a19.57%2019.57%200%200%201%204.832-14.628z%22%2F%3E%3Cpath%20fill%3D%22%237e858b%22%20d%3D%22M80.997%2031.809a18.38%2018.38%200%200%201%2013.239-4.71v6.07a11.27%2011.27%200%200%200-8.638%203.317A15.98%2015.98%200%200%200%2082.883%2047v33.998c-.27%203.69.748%207.36%202.88%2010.382a11.19%2011.19%200%200%200%208.77%203.615v5.938a18.4%2018.4%200%200%201-13.238-4.744a19.67%2019.67%200%200%201-5.03-14.627V46.434a19.7%2019.7%200%200%201%204.732-14.627z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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