mermaid logo

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

Name: mermaid
Set: SVG Logos
Style: Color
Viewbox: 256×256
License: CC0

The same logo in other sets

mermaidCatppuccin Icons mermaidMaterial Icon Theme mermaidNoto Emoji mermaidOpenMoji mermaidSimple Icons mermaidTDesign Icons mermaidTwitter Emoji

Use the mermaid logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#ff3670" d="M256 44.19C256 19.8 236.2 0 211.81 0H44.19C19.8 0 0 19.8 0 44.19v167.62C0 236.2 19.8 256 44.19 256h167.62c24.39 0 44.19-19.8 44.19-44.19z"/><path fill="#fff" d="M212.818 58.067C175.27 56.46 140.792 79.563 128 114.9c-12.792-35.337-47.27-58.44-84.818-56.833c-1.25 29.795 13.003 58.209 37.635 75.02a46.42 46.42 0 0 1 20.124 38.361v26.563h54.123v-26.563a46.42 46.42 0 0 1 20.119-38.361c24.639-16.805 38.895-45.223 37.635-75.02"/></svg>

React

import type { SVGProps } from "react";

export function LogosMermaid(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#ff3670" d="M256 44.19C256 19.8 236.2 0 211.81 0H44.19C19.8 0 0 19.8 0 44.19v167.62C0 236.2 19.8 256 44.19 256h167.62c24.39 0 44.19-19.8 44.19-44.19z"/><path fill="#fff" d="M212.818 58.067C175.27 56.46 140.792 79.563 128 114.9c-12.792-35.337-47.27-58.44-84.818-56.833c-1.25 29.795 13.003 58.209 37.635 75.02a46.42 46.42 0 0 1 20.124 38.361v26.563h54.123v-26.563a46.42 46.42 0 0 1 20.119-38.361c24.639-16.805 38.895-45.223 37.635-75.02"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="#ff3670" d="M256 44.19C256 19.8 236.2 0 211.81 0H44.19C19.8 0 0 19.8 0 44.19v167.62C0 236.2 19.8 256 44.19 256h167.62c24.39 0 44.19-19.8 44.19-44.19z"/><path fill="#fff" d="M212.818 58.067C175.27 56.46 140.792 79.563 128 114.9c-12.792-35.337-47.27-58.44-84.818-56.833c-1.25 29.795 13.003 58.209 37.635 75.02a46.42 46.42 0 0 1 20.124 38.361v26.563h54.123v-26.563a46.42 46.42 0 0 1 20.119-38.361c24.639-16.805 38.895-45.223 37.635-75.02"/></svg>
</template>

CSS

.icon-mermaid {
  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%20256%22%3E%3Cpath%20fill%3D%22%23ff3670%22%20d%3D%22M256%2044.19C256%2019.8%20236.2%200%20211.81%200H44.19C19.8%200%200%2019.8%200%2044.19v167.62C0%20236.2%2019.8%20256%2044.19%20256h167.62c24.39%200%2044.19-19.8%2044.19-44.19z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M212.818%2058.067C175.27%2056.46%20140.792%2079.563%20128%20114.9c-12.792-35.337-47.27-58.44-84.818-56.833c-1.25%2029.795%2013.003%2058.209%2037.635%2075.02a46.42%2046.42%200%200%201%2020.124%2038.361v26.563h54.123v-26.563a46.42%2046.42%200%200%201%2020.119-38.361c24.639-16.805%2038.895-45.223%2037.635-75.02%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%20256%22%3E%3Cpath%20fill%3D%22%23ff3670%22%20d%3D%22M256%2044.19C256%2019.8%20236.2%200%20211.81%200H44.19C19.8%200%200%2019.8%200%2044.19v167.62C0%20236.2%2019.8%20256%2044.19%20256h167.62c24.39%200%2044.19-19.8%2044.19-44.19z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M212.818%2058.067C175.27%2056.46%20140.792%2079.563%20128%20114.9c-12.792-35.337-47.27-58.44-84.818-56.833c-1.25%2029.795%2013.003%2058.209%2037.635%2075.02a46.42%2046.42%200%200%201%2020.124%2038.361v26.563h54.123v-26.563a46.42%2046.42%200%200%201%2020.119-38.361c24.639-16.805%2038.895-45.223%2037.635-75.02%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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