elm logo

elm from Devicon by konpa · Original · MIT Free for personal and commercial use.

Name
elm
Set
Devicon
Style
Original
Viewbox
128×128
License
MIT

1 other variant in Devicon

elm-wordmark

The same logo in other sets

elmCatppuccin IconselmSVG LogoselmMaterial Icon ThemeelmSimple Icons

Use the elm logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#efa500" d="m64 60.74l25.65-25.65h-51.3z"/><path fill="#8dd737" d="m7.91 4.65l25.83 25.84h56.17L64.07 4.65zm59.353 59.343l28.08-28.08l27.951 27.953l-28.08 28.079z"/><path fill="#60b5cc" d="M123.35 57.42V4.65H70.58z"/><path fill="#34495e" d="M60.74 64L4.65 7.91V120.1z"/><path fill="#efa500" d="m98.47 95.21l24.88 24.89V70.33z"/><path fill="#60b5cc" d="M64 67.26L7.91 123.35h112.18z"/></svg>

React

import type { SVGProps } from "react";

export function DeviconElm(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#efa500" d="m64 60.74l25.65-25.65h-51.3z"/><path fill="#8dd737" d="m7.91 4.65l25.83 25.84h56.17L64.07 4.65zm59.353 59.343l28.08-28.08l27.951 27.953l-28.08 28.079z"/><path fill="#60b5cc" d="M123.35 57.42V4.65H70.58z"/><path fill="#34495e" d="M60.74 64L4.65 7.91V120.1z"/><path fill="#efa500" d="m98.47 95.21l24.88 24.89V70.33z"/><path fill="#60b5cc" d="M64 67.26L7.91 123.35h112.18z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#efa500" d="m64 60.74l25.65-25.65h-51.3z"/><path fill="#8dd737" d="m7.91 4.65l25.83 25.84h56.17L64.07 4.65zm59.353 59.343l28.08-28.08l27.951 27.953l-28.08 28.079z"/><path fill="#60b5cc" d="M123.35 57.42V4.65H70.58z"/><path fill="#34495e" d="M60.74 64L4.65 7.91V120.1z"/><path fill="#efa500" d="m98.47 95.21l24.88 24.89V70.33z"/><path fill="#60b5cc" d="M64 67.26L7.91 123.35h112.18z"/></svg>
</template>

CSS

.icon-elm {
  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%20128%20128%22%3E%3Cpath%20fill%3D%22%23efa500%22%20d%3D%22m64%2060.74l25.65-25.65h-51.3z%22%2F%3E%3Cpath%20fill%3D%22%238dd737%22%20d%3D%22m7.91%204.65l25.83%2025.84h56.17L64.07%204.65zm59.353%2059.343l28.08-28.08l27.951%2027.953l-28.08%2028.079z%22%2F%3E%3Cpath%20fill%3D%22%2360b5cc%22%20d%3D%22M123.35%2057.42V4.65H70.58z%22%2F%3E%3Cpath%20fill%3D%22%2334495e%22%20d%3D%22M60.74%2064L4.65%207.91V120.1z%22%2F%3E%3Cpath%20fill%3D%22%23efa500%22%20d%3D%22m98.47%2095.21l24.88%2024.89V70.33z%22%2F%3E%3Cpath%20fill%3D%22%2360b5cc%22%20d%3D%22M64%2067.26L7.91%20123.35h112.18z%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%20128%20128%22%3E%3Cpath%20fill%3D%22%23efa500%22%20d%3D%22m64%2060.74l25.65-25.65h-51.3z%22%2F%3E%3Cpath%20fill%3D%22%238dd737%22%20d%3D%22m7.91%204.65l25.83%2025.84h56.17L64.07%204.65zm59.353%2059.343l28.08-28.08l27.951%2027.953l-28.08%2028.079z%22%2F%3E%3Cpath%20fill%3D%22%2360b5cc%22%20d%3D%22M123.35%2057.42V4.65H70.58z%22%2F%3E%3Cpath%20fill%3D%22%2334495e%22%20d%3D%22M60.74%2064L4.65%207.91V120.1z%22%2F%3E%3Cpath%20fill%3D%22%23efa500%22%20d%3D%22m98.47%2095.21l24.88%2024.89V70.33z%22%2F%3E%3Cpath%20fill%3D%22%2360b5cc%22%20d%3D%22M64%2067.26L7.91%20123.35h112.18z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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