svelte logo

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

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

The same logo in other sets

svelteBoxicons Brands svelteCatppuccin Icons svelteCoreUI Brands svelteDevicon svelteFont Awesome Brands svelteSVG Logos svelteMaterial Icon Theme svelte-fillRemix Icon svelteSkill Icons svelte-outlineTeenyicons

Use the svelte logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767a4.1 4.1 0 0 1-.703-3.107a4 4 0 0 1 .134-.522l.105-.321l.287.21a7.2 7.2 0 0 0 2.186 1.092l.208.063l-.02.208a1.25 1.25 0 0 0 .226.83a1.34 1.34 0 0 0 1.435.533a1.2 1.2 0 0 0 .343-.15l5.59-3.562a1.16 1.16 0 0 0 .524-.778a1.24 1.24 0 0 0-.211-.937a1.34 1.34 0 0 0-1.435-.533a1.2 1.2 0 0 0-.343.15l-2.133 1.36a4 4 0 0 1-1.135.499a4.44 4.44 0 0 1-4.765-1.766a4.1 4.1 0 0 1-.702-3.108a3.86 3.86 0 0 1 1.742-2.582l5.589-3.563a4 4 0 0 1 1.135-.499a4.44 4.44 0 0 1 4.765 1.767a4.1 4.1 0 0 1 .703 3.107a4 4 0 0 1-.134.522l-.105.321l-.286-.21a7.2 7.2 0 0 0-2.187-1.093l-.208-.063l.02-.207a1.25 1.25 0 0 0-.226-.831a1.34 1.34 0 0 0-1.435-.532a1.2 1.2 0 0 0-.343.15L8.62 9.368a1.16 1.16 0 0 0-.524.778a1.24 1.24 0 0 0 .211.937a1.34 1.34 0 0 0 1.435.533a1.2 1.2 0 0 0 .344-.151l2.132-1.36a4 4 0 0 1 1.135-.498a4.44 4.44 0 0 1 4.765 1.766a4.1 4.1 0 0 1 .702 3.108a3.86 3.86 0 0 1-1.742 2.583l-5.589 3.562a4 4 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.4 6.4 0 0 0-2.896 4.295a6.75 6.75 0 0 0 .666 4.336a6.4 6.4 0 0 0-.96 2.396a6.83 6.83 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.4 6.4 0 0 0 2.896-4.295a6.76 6.76 0 0 0-.665-4.336a6.4 6.4 0 0 0 .958-2.396a6.83 6.83 0 0 0-1.167-5.168"/></svg>

React

import type { SVGProps } from "react";

export function SimpleIconsSvelte(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.354 21.125a4.44 4.44 0 0 1-4.765-1.767a4.1 4.1 0 0 1-.703-3.107a4 4 0 0 1 .134-.522l.105-.321l.287.21a7.2 7.2 0 0 0 2.186 1.092l.208.063l-.02.208a1.25 1.25 0 0 0 .226.83a1.34 1.34 0 0 0 1.435.533a1.2 1.2 0 0 0 .343-.15l5.59-3.562a1.16 1.16 0 0 0 .524-.778a1.24 1.24 0 0 0-.211-.937a1.34 1.34 0 0 0-1.435-.533a1.2 1.2 0 0 0-.343.15l-2.133 1.36a4 4 0 0 1-1.135.499a4.44 4.44 0 0 1-4.765-1.766a4.1 4.1 0 0 1-.702-3.108a3.86 3.86 0 0 1 1.742-2.582l5.589-3.563a4 4 0 0 1 1.135-.499a4.44 4.44 0 0 1 4.765 1.767a4.1 4.1 0 0 1 .703 3.107a4 4 0 0 1-.134.522l-.105.321l-.286-.21a7.2 7.2 0 0 0-2.187-1.093l-.208-.063l.02-.207a1.25 1.25 0 0 0-.226-.831a1.34 1.34 0 0 0-1.435-.532a1.2 1.2 0 0 0-.343.15L8.62 9.368a1.16 1.16 0 0 0-.524.778a1.24 1.24 0 0 0 .211.937a1.34 1.34 0 0 0 1.435.533a1.2 1.2 0 0 0 .344-.151l2.132-1.36a4 4 0 0 1 1.135-.498a4.44 4.44 0 0 1 4.765 1.766a4.1 4.1 0 0 1 .702 3.108a3.86 3.86 0 0 1-1.742 2.583l-5.589 3.562a4 4 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.4 6.4 0 0 0-2.896 4.295a6.75 6.75 0 0 0 .666 4.336a6.4 6.4 0 0 0-.96 2.396a6.83 6.83 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.4 6.4 0 0 0 2.896-4.295a6.76 6.76 0 0 0-.665-4.336a6.4 6.4 0 0 0 .958-2.396a6.83 6.83 0 0 0-1.167-5.168"/></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.354 21.125a4.44 4.44 0 0 1-4.765-1.767a4.1 4.1 0 0 1-.703-3.107a4 4 0 0 1 .134-.522l.105-.321l.287.21a7.2 7.2 0 0 0 2.186 1.092l.208.063l-.02.208a1.25 1.25 0 0 0 .226.83a1.34 1.34 0 0 0 1.435.533a1.2 1.2 0 0 0 .343-.15l5.59-3.562a1.16 1.16 0 0 0 .524-.778a1.24 1.24 0 0 0-.211-.937a1.34 1.34 0 0 0-1.435-.533a1.2 1.2 0 0 0-.343.15l-2.133 1.36a4 4 0 0 1-1.135.499a4.44 4.44 0 0 1-4.765-1.766a4.1 4.1 0 0 1-.702-3.108a3.86 3.86 0 0 1 1.742-2.582l5.589-3.563a4 4 0 0 1 1.135-.499a4.44 4.44 0 0 1 4.765 1.767a4.1 4.1 0 0 1 .703 3.107a4 4 0 0 1-.134.522l-.105.321l-.286-.21a7.2 7.2 0 0 0-2.187-1.093l-.208-.063l.02-.207a1.25 1.25 0 0 0-.226-.831a1.34 1.34 0 0 0-1.435-.532a1.2 1.2 0 0 0-.343.15L8.62 9.368a1.16 1.16 0 0 0-.524.778a1.24 1.24 0 0 0 .211.937a1.34 1.34 0 0 0 1.435.533a1.2 1.2 0 0 0 .344-.151l2.132-1.36a4 4 0 0 1 1.135-.498a4.44 4.44 0 0 1 4.765 1.766a4.1 4.1 0 0 1 .702 3.108a3.86 3.86 0 0 1-1.742 2.583l-5.589 3.562a4 4 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.4 6.4 0 0 0-2.896 4.295a6.75 6.75 0 0 0 .666 4.336a6.4 6.4 0 0 0-.96 2.396a6.83 6.83 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.4 6.4 0 0 0 2.896-4.295a6.76 6.76 0 0 0-.665-4.336a6.4 6.4 0 0 0 .958-2.396a6.83 6.83 0 0 0-1.167-5.168"/></svg>
</template>

CSS

.icon-svelte {
  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.354%2021.125a4.44%204.44%200%200%201-4.765-1.767a4.1%204.1%200%200%201-.703-3.107a4%204%200%200%201%20.134-.522l.105-.321l.287.21a7.2%207.2%200%200%200%202.186%201.092l.208.063l-.02.208a1.25%201.25%200%200%200%20.226.83a1.34%201.34%200%200%200%201.435.533a1.2%201.2%200%200%200%20.343-.15l5.59-3.562a1.16%201.16%200%200%200%20.524-.778a1.24%201.24%200%200%200-.211-.937a1.34%201.34%200%200%200-1.435-.533a1.2%201.2%200%200%200-.343.15l-2.133%201.36a4%204%200%200%201-1.135.499a4.44%204.44%200%200%201-4.765-1.766a4.1%204.1%200%200%201-.702-3.108a3.86%203.86%200%200%201%201.742-2.582l5.589-3.563a4%204%200%200%201%201.135-.499a4.44%204.44%200%200%201%204.765%201.767a4.1%204.1%200%200%201%20.703%203.107a4%204%200%200%201-.134.522l-.105.321l-.286-.21a7.2%207.2%200%200%200-2.187-1.093l-.208-.063l.02-.207a1.25%201.25%200%200%200-.226-.831a1.34%201.34%200%200%200-1.435-.532a1.2%201.2%200%200%200-.343.15L8.62%209.368a1.16%201.16%200%200%200-.524.778a1.24%201.24%200%200%200%20.211.937a1.34%201.34%200%200%200%201.435.533a1.2%201.2%200%200%200%20.344-.151l2.132-1.36a4%204%200%200%201%201.135-.498a4.44%204.44%200%200%201%204.765%201.766a4.1%204.1%200%200%201%20.702%203.108a3.86%203.86%200%200%201-1.742%202.583l-5.589%203.562a4%204%200%200%201-1.135.499m10.358-17.95C18.484-.015%2014.082-.96%2010.9%201.068L5.31%204.63a6.4%206.4%200%200%200-2.896%204.295a6.75%206.75%200%200%200%20.666%204.336a6.4%206.4%200%200%200-.96%202.396a6.83%206.83%200%200%200%201.168%205.167c2.229%203.19%206.63%204.135%209.812%202.108l5.59-3.562a6.4%206.4%200%200%200%202.896-4.295a6.76%206.76%200%200%200-.665-4.336a6.4%206.4%200%200%200%20.958-2.396a6.83%206.83%200%200%200-1.167-5.168%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.354%2021.125a4.44%204.44%200%200%201-4.765-1.767a4.1%204.1%200%200%201-.703-3.107a4%204%200%200%201%20.134-.522l.105-.321l.287.21a7.2%207.2%200%200%200%202.186%201.092l.208.063l-.02.208a1.25%201.25%200%200%200%20.226.83a1.34%201.34%200%200%200%201.435.533a1.2%201.2%200%200%200%20.343-.15l5.59-3.562a1.16%201.16%200%200%200%20.524-.778a1.24%201.24%200%200%200-.211-.937a1.34%201.34%200%200%200-1.435-.533a1.2%201.2%200%200%200-.343.15l-2.133%201.36a4%204%200%200%201-1.135.499a4.44%204.44%200%200%201-4.765-1.766a4.1%204.1%200%200%201-.702-3.108a3.86%203.86%200%200%201%201.742-2.582l5.589-3.563a4%204%200%200%201%201.135-.499a4.44%204.44%200%200%201%204.765%201.767a4.1%204.1%200%200%201%20.703%203.107a4%204%200%200%201-.134.522l-.105.321l-.286-.21a7.2%207.2%200%200%200-2.187-1.093l-.208-.063l.02-.207a1.25%201.25%200%200%200-.226-.831a1.34%201.34%200%200%200-1.435-.532a1.2%201.2%200%200%200-.343.15L8.62%209.368a1.16%201.16%200%200%200-.524.778a1.24%201.24%200%200%200%20.211.937a1.34%201.34%200%200%200%201.435.533a1.2%201.2%200%200%200%20.344-.151l2.132-1.36a4%204%200%200%201%201.135-.498a4.44%204.44%200%200%201%204.765%201.766a4.1%204.1%200%200%201%20.702%203.108a3.86%203.86%200%200%201-1.742%202.583l-5.589%203.562a4%204%200%200%201-1.135.499m10.358-17.95C18.484-.015%2014.082-.96%2010.9%201.068L5.31%204.63a6.4%206.4%200%200%200-2.896%204.295a6.75%206.75%200%200%200%20.666%204.336a6.4%206.4%200%200%200-.96%202.396a6.83%206.83%200%200%200%201.168%205.167c2.229%203.19%206.63%204.135%209.812%202.108l5.59-3.562a6.4%206.4%200%200%200%202.896-4.295a6.76%206.76%200%200%200-.665-4.336a6.4%206.4%200%200%200%20.958-2.396a6.83%206.83%200%200%200-1.167-5.168%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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