haskell icon logo

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

Name
haskell-icon
Set
SVG Logos
Style
Color
Viewbox
256×181
License
CC0

Use the haskell icon logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 181"><path fill="#453a62" d="m0 180.591l60.235-90.294L0 0h45.176l60.236 90.297l-60.236 90.294z"/><path fill="#5e5086" d="m60.235 180.591l60.236-90.294L60.235 0h45.177l120.465 180.591h-45.171l-37.645-56.432l-37.652 56.432z"/><path fill="#8f4e8b" d="m205.804 127.92l-20.079-30.1H256v30.102h-50.196zm-30.118-45.145l-20.078-30.1H256v30.1z"/></svg>

React

import type { SVGProps } from "react";

export function LogosHaskellIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 181"><path fill="#453a62" d="m0 180.591l60.235-90.294L0 0h45.176l60.236 90.297l-60.236 90.294z"/><path fill="#5e5086" d="m60.235 180.591l60.236-90.294L60.235 0h45.177l120.465 180.591h-45.171l-37.645-56.432l-37.652 56.432z"/><path fill="#8f4e8b" d="m205.804 127.92l-20.079-30.1H256v30.102h-50.196zm-30.118-45.145l-20.078-30.1H256v30.1z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 181"><path fill="#453a62" d="m0 180.591l60.235-90.294L0 0h45.176l60.236 90.297l-60.236 90.294z"/><path fill="#5e5086" d="m60.235 180.591l60.236-90.294L60.235 0h45.177l120.465 180.591h-45.171l-37.645-56.432l-37.652 56.432z"/><path fill="#8f4e8b" d="m205.804 127.92l-20.079-30.1H256v30.102h-50.196zm-30.118-45.145l-20.078-30.1H256v30.1z"/></svg>
</template>

CSS

.icon-haskell-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%20181%22%3E%3Cpath%20fill%3D%22%23453a62%22%20d%3D%22m0%20180.591l60.235-90.294L0%200h45.176l60.236%2090.297l-60.236%2090.294z%22%2F%3E%3Cpath%20fill%3D%22%235e5086%22%20d%3D%22m60.235%20180.591l60.236-90.294L60.235%200h45.177l120.465%20180.591h-45.171l-37.645-56.432l-37.652%2056.432z%22%2F%3E%3Cpath%20fill%3D%22%238f4e8b%22%20d%3D%22m205.804%20127.92l-20.079-30.1H256v30.102h-50.196zm-30.118-45.145l-20.078-30.1H256v30.1z%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%20181%22%3E%3Cpath%20fill%3D%22%23453a62%22%20d%3D%22m0%20180.591l60.235-90.294L0%200h45.176l60.236%2090.297l-60.236%2090.294z%22%2F%3E%3Cpath%20fill%3D%22%235e5086%22%20d%3D%22m60.235%20180.591l60.236-90.294L60.235%200h45.177l120.465%20180.591h-45.171l-37.645-56.432l-37.652%2056.432z%22%2F%3E%3Cpath%20fill%3D%22%238f4e8b%22%20d%3D%22m205.804%20127.92l-20.079-30.1H256v30.102h-50.196zm-30.118-45.145l-20.078-30.1H256v30.1z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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