perplexity icon logo

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

Name
perplexity-icon
Set
SVG Logos
Style
Color
Viewbox
256×298
License
CC0

Use the perplexity icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 298"><path fill="#3f7e8b" d="m34.831 0l84.689 78.028V.18h16.486v78.197L221.074 0v88.964H256v128.322h-34.819v79.218l-85.175-74.833v75.692H119.52v-74.459l-84.593 74.508v-80.126H0V88.964h34.831zm72.26 105.248H16.487v95.753h18.42v-30.204zm-55.68 72.775v83.052l68.109-59.988v-84.926zm85.069 22.27v-84.212l68.128 61.865v39.34h.088v42.94zm84.701.708h18.333v-95.753h-89.93l71.597 64.87zM204.588 88.964V37.457l-55.904 51.507zm-97.368 0H51.317V37.457z"/></svg>

React

import type { SVGProps } from "react";

export function LogosPerplexityIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 298"><path fill="#3f7e8b" d="m34.831 0l84.689 78.028V.18h16.486v78.197L221.074 0v88.964H256v128.322h-34.819v79.218l-85.175-74.833v75.692H119.52v-74.459l-84.593 74.508v-80.126H0V88.964h34.831zm72.26 105.248H16.487v95.753h18.42v-30.204zm-55.68 72.775v83.052l68.109-59.988v-84.926zm85.069 22.27v-84.212l68.128 61.865v39.34h.088v42.94zm84.701.708h18.333v-95.753h-89.93l71.597 64.87zM204.588 88.964V37.457l-55.904 51.507zm-97.368 0H51.317V37.457z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 298"><path fill="#3f7e8b" d="m34.831 0l84.689 78.028V.18h16.486v78.197L221.074 0v88.964H256v128.322h-34.819v79.218l-85.175-74.833v75.692H119.52v-74.459l-84.593 74.508v-80.126H0V88.964h34.831zm72.26 105.248H16.487v95.753h18.42v-30.204zm-55.68 72.775v83.052l68.109-59.988v-84.926zm85.069 22.27v-84.212l68.128 61.865v39.34h.088v42.94zm84.701.708h18.333v-95.753h-89.93l71.597 64.87zM204.588 88.964V37.457l-55.904 51.507zm-97.368 0H51.317V37.457z"/></svg>
</template>

CSS

.icon-perplexity-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%20298%22%3E%3Cpath%20fill%3D%22%233f7e8b%22%20d%3D%22m34.831%200l84.689%2078.028V.18h16.486v78.197L221.074%200v88.964H256v128.322h-34.819v79.218l-85.175-74.833v75.692H119.52v-74.459l-84.593%2074.508v-80.126H0V88.964h34.831zm72.26%20105.248H16.487v95.753h18.42v-30.204zm-55.68%2072.775v83.052l68.109-59.988v-84.926zm85.069%2022.27v-84.212l68.128%2061.865v39.34h.088v42.94zm84.701.708h18.333v-95.753h-89.93l71.597%2064.87zM204.588%2088.964V37.457l-55.904%2051.507zm-97.368%200H51.317V37.457z%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%20298%22%3E%3Cpath%20fill%3D%22%233f7e8b%22%20d%3D%22m34.831%200l84.689%2078.028V.18h16.486v78.197L221.074%200v88.964H256v128.322h-34.819v79.218l-85.175-74.833v75.692H119.52v-74.459l-84.593%2074.508v-80.126H0V88.964h34.831zm72.26%20105.248H16.487v95.753h18.42v-30.204zm-55.68%2072.775v83.052l68.109-59.988v-84.926zm85.069%2022.27v-84.212l68.128%2061.865v39.34h.088v42.94zm84.701.708h18.333v-95.753h-89.93l71.597%2064.87zM204.588%2088.964V37.457l-55.904%2051.507zm-97.368%200H51.317V37.457z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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