leptos logo

leptos from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.

Name
leptos
Set
Simple Icons
Style
Brand
Viewbox
24×24
License
CC0 1.0

Use the leptos logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10.097 17.876A6.21 6.21 0 0 1 5.834 12c0-3.393 2.773-6.166 6.166-6.166c.248 0 .517.021.766.042a9.9 9.9 0 0 1 1.49-2.504a3.58 3.58 0 0 1-.85-2.296c0-.331.042-.662.146-.993A20 20 0 0 0 12 0C5.38 0 0 5.38 0 12c0 4.366 2.338 8.172 5.814 10.283l.124-.062a8.43 8.43 0 0 0 4.159-4.345m6.848-14.979c.662 0 1.262-.352 1.593-.952v-.02a12.3 12.3 0 0 0-3.269-1.49v.02a1.9 1.9 0 0 0-.124.642c0 .993.807 1.8 1.8 1.8M19.924 3c-.662 1.014-1.758 1.634-2.98 1.634a3.5 3.5 0 0 1-.806-.103a3 3 0 0 1-.476-.145a8.8 8.8 0 0 0-1.22 1.945c2.275.993 3.724 3.186 3.724 5.669c0 3.393-2.773 6.166-6.166 6.166h-.145a10.37 10.37 0 0 1-4.117 5.048C9.062 23.71 10.51 24 12 24c6.62 0 12-5.38 12-12c0-3.58-1.572-6.807-4.076-9m-8.848 4.67a4.428 4.428 0 1 0 1.849 8.661a4.428 4.428 0 1 0-1.85-8.66z"/></svg>

React

import type { SVGProps } from "react";

export function SimpleIconsLeptos(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10.097 17.876A6.21 6.21 0 0 1 5.834 12c0-3.393 2.773-6.166 6.166-6.166c.248 0 .517.021.766.042a9.9 9.9 0 0 1 1.49-2.504a3.58 3.58 0 0 1-.85-2.296c0-.331.042-.662.146-.993A20 20 0 0 0 12 0C5.38 0 0 5.38 0 12c0 4.366 2.338 8.172 5.814 10.283l.124-.062a8.43 8.43 0 0 0 4.159-4.345m6.848-14.979c.662 0 1.262-.352 1.593-.952v-.02a12.3 12.3 0 0 0-3.269-1.49v.02a1.9 1.9 0 0 0-.124.642c0 .993.807 1.8 1.8 1.8M19.924 3c-.662 1.014-1.758 1.634-2.98 1.634a3.5 3.5 0 0 1-.806-.103a3 3 0 0 1-.476-.145a8.8 8.8 0 0 0-1.22 1.945c2.275.993 3.724 3.186 3.724 5.669c0 3.393-2.773 6.166-6.166 6.166h-.145a10.37 10.37 0 0 1-4.117 5.048C9.062 23.71 10.51 24 12 24c6.62 0 12-5.38 12-12c0-3.58-1.572-6.807-4.076-9m-8.848 4.67a4.428 4.428 0 1 0 1.849 8.661a4.428 4.428 0 1 0-1.85-8.66z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10.097 17.876A6.21 6.21 0 0 1 5.834 12c0-3.393 2.773-6.166 6.166-6.166c.248 0 .517.021.766.042a9.9 9.9 0 0 1 1.49-2.504a3.58 3.58 0 0 1-.85-2.296c0-.331.042-.662.146-.993A20 20 0 0 0 12 0C5.38 0 0 5.38 0 12c0 4.366 2.338 8.172 5.814 10.283l.124-.062a8.43 8.43 0 0 0 4.159-4.345m6.848-14.979c.662 0 1.262-.352 1.593-.952v-.02a12.3 12.3 0 0 0-3.269-1.49v.02a1.9 1.9 0 0 0-.124.642c0 .993.807 1.8 1.8 1.8M19.924 3c-.662 1.014-1.758 1.634-2.98 1.634a3.5 3.5 0 0 1-.806-.103a3 3 0 0 1-.476-.145a8.8 8.8 0 0 0-1.22 1.945c2.275.993 3.724 3.186 3.724 5.669c0 3.393-2.773 6.166-6.166 6.166h-.145a10.37 10.37 0 0 1-4.117 5.048C9.062 23.71 10.51 24 12 24c6.62 0 12-5.38 12-12c0-3.58-1.572-6.807-4.076-9m-8.848 4.67a4.428 4.428 0 1 0 1.849 8.661a4.428 4.428 0 1 0-1.85-8.66z"/></svg>
</template>

CSS

.icon-leptos {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10.097%2017.876A6.21%206.21%200%200%201%205.834%2012c0-3.393%202.773-6.166%206.166-6.166c.248%200%20.517.021.766.042a9.9%209.9%200%200%201%201.49-2.504a3.58%203.58%200%200%201-.85-2.296c0-.331.042-.662.146-.993A20%2020%200%200%200%2012%200C5.38%200%200%205.38%200%2012c0%204.366%202.338%208.172%205.814%2010.283l.124-.062a8.43%208.43%200%200%200%204.159-4.345m6.848-14.979c.662%200%201.262-.352%201.593-.952v-.02a12.3%2012.3%200%200%200-3.269-1.49v.02a1.9%201.9%200%200%200-.124.642c0%20.993.807%201.8%201.8%201.8M19.924%203c-.662%201.014-1.758%201.634-2.98%201.634a3.5%203.5%200%200%201-.806-.103a3%203%200%200%201-.476-.145a8.8%208.8%200%200%200-1.22%201.945c2.275.993%203.724%203.186%203.724%205.669c0%203.393-2.773%206.166-6.166%206.166h-.145a10.37%2010.37%200%200%201-4.117%205.048C9.062%2023.71%2010.51%2024%2012%2024c6.62%200%2012-5.38%2012-12c0-3.58-1.572-6.807-4.076-9m-8.848%204.67a4.428%204.428%200%201%200%201.849%208.661a4.428%204.428%200%201%200-1.85-8.66z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10.097%2017.876A6.21%206.21%200%200%201%205.834%2012c0-3.393%202.773-6.166%206.166-6.166c.248%200%20.517.021.766.042a9.9%209.9%200%200%201%201.49-2.504a3.58%203.58%200%200%201-.85-2.296c0-.331.042-.662.146-.993A20%2020%200%200%200%2012%200C5.38%200%200%205.38%200%2012c0%204.366%202.338%208.172%205.814%2010.283l.124-.062a8.43%208.43%200%200%200%204.159-4.345m6.848-14.979c.662%200%201.262-.352%201.593-.952v-.02a12.3%2012.3%200%200%200-3.269-1.49v.02a1.9%201.9%200%200%200-.124.642c0%20.993.807%201.8%201.8%201.8M19.924%203c-.662%201.014-1.758%201.634-2.98%201.634a3.5%203.5%200%200%201-.806-.103a3%203%200%200%201-.476-.145a8.8%208.8%200%200%200-1.22%201.945c2.275.993%203.724%203.186%203.724%205.669c0%203.393-2.773%206.166-6.166%206.166h-.145a10.37%2010.37%200%200%201-4.117%205.048C9.062%2023.71%2010.51%2024%2012%2024c6.62%200%2012-5.38%2012-12c0-3.58-1.572-6.807-4.076-9m-8.848%204.67a4.428%204.428%200%201%200%201.849%208.661a4.428%204.428%200%201%200-1.85-8.66z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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