asana icon logo

asana-icon from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.

Name
asana-icon
Set
SVG Logos
Style
Color
Viewbox
256×237
License
CC0

Use the asana icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 237"><path fill="#f06a6a" d="M200.325 125.27c-30.749 0-55.675 24.927-55.675 55.677s24.926 55.677 55.675 55.677S256 211.696 256 180.947c0-30.75-24.926-55.677-55.675-55.677m-144.65.005C24.927 125.275 0 150.197 0 180.947s24.927 55.677 55.675 55.677c30.75 0 55.678-24.928 55.678-55.677c0-30.75-24.928-55.672-55.678-55.672m128-69.6c0 30.75-24.927 55.68-55.674 55.68c-30.75 0-55.676-24.93-55.676-55.68C72.325 24.928 97.25 0 128 0c30.747 0 55.673 24.93 55.673 55.674"/></svg>

React

import type { SVGProps } from "react";

export function LogosAsanaIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 237"><path fill="#f06a6a" d="M200.325 125.27c-30.749 0-55.675 24.927-55.675 55.677s24.926 55.677 55.675 55.677S256 211.696 256 180.947c0-30.75-24.926-55.677-55.675-55.677m-144.65.005C24.927 125.275 0 150.197 0 180.947s24.927 55.677 55.675 55.677c30.75 0 55.678-24.928 55.678-55.677c0-30.75-24.928-55.672-55.678-55.672m128-69.6c0 30.75-24.927 55.68-55.674 55.68c-30.75 0-55.676-24.93-55.676-55.68C72.325 24.928 97.25 0 128 0c30.747 0 55.673 24.93 55.673 55.674"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 237"><path fill="#f06a6a" d="M200.325 125.27c-30.749 0-55.675 24.927-55.675 55.677s24.926 55.677 55.675 55.677S256 211.696 256 180.947c0-30.75-24.926-55.677-55.675-55.677m-144.65.005C24.927 125.275 0 150.197 0 180.947s24.927 55.677 55.675 55.677c30.75 0 55.678-24.928 55.678-55.677c0-30.75-24.928-55.672-55.678-55.672m128-69.6c0 30.75-24.927 55.68-55.674 55.68c-30.75 0-55.676-24.93-55.676-55.68C72.325 24.928 97.25 0 128 0c30.747 0 55.673 24.93 55.673 55.674"/></svg>
</template>

CSS

.icon-asana-icon {
  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%20256%20237%22%3E%3Cpath%20fill%3D%22%23f06a6a%22%20d%3D%22M200.325%20125.27c-30.749%200-55.675%2024.927-55.675%2055.677s24.926%2055.677%2055.675%2055.677S256%20211.696%20256%20180.947c0-30.75-24.926-55.677-55.675-55.677m-144.65.005C24.927%20125.275%200%20150.197%200%20180.947s24.927%2055.677%2055.675%2055.677c30.75%200%2055.678-24.928%2055.678-55.677c0-30.75-24.928-55.672-55.678-55.672m128-69.6c0%2030.75-24.927%2055.68-55.674%2055.68c-30.75%200-55.676-24.93-55.676-55.68C72.325%2024.928%2097.25%200%20128%200c30.747%200%2055.673%2024.93%2055.673%2055.674%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%20256%20237%22%3E%3Cpath%20fill%3D%22%23f06a6a%22%20d%3D%22M200.325%20125.27c-30.749%200-55.675%2024.927-55.675%2055.677s24.926%2055.677%2055.675%2055.677S256%20211.696%20256%20180.947c0-30.75-24.926-55.677-55.675-55.677m-144.65.005C24.927%20125.275%200%20150.197%200%20180.947s24.927%2055.677%2055.675%2055.677c30.75%200%2055.678-24.928%2055.678-55.677c0-30.75-24.928-55.672-55.678-55.672m128-69.6c0%2030.75-24.927%2055.68-55.674%2055.68c-30.75%200-55.676-24.93-55.676-55.68C72.325%2024.928%2097.25%200%20128%200c30.747%200%2055.673%2024.93%2055.673%2055.674%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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