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

Name
scala
Set
SVG Logos
Style
Color
Viewbox
256×416
License
CC0

The same logo in other sets

Use the scala logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 416"><defs><linearGradient id="SVGIoYDikML" x1="0%" x2="100%" y1="50%" y2="50%"><stop offset="0%" stop-color="#4f4f4f"/><stop offset="100%"/></linearGradient><linearGradient id="SVG8SIKbbQY" x1="0%" x2="100%" y1="50%" y2="50%"><stop offset="0%" stop-color="#c40000"/><stop offset="100%" stop-color="red"/></linearGradient></defs><path fill="url(#SVGIoYDikML)" d="M0 288v-32c0-5.394 116.377-14.428 192.2-32c36.628 8.49 63.8 18.969 63.8 32v32c0 13.024-27.172 23.51-63.8 32C116.376 302.425 0 293.39 0 288" transform="matrix(1 0 0 -1 0 544)"/><path fill="url(#SVGIoYDikML)" d="M0 160v-32c0-5.394 116.377-14.428 192.2-32c36.628 8.49 63.8 18.969 63.8 32v32c0 13.024-27.172 23.51-63.8 32C116.376 174.425 0 165.39 0 160" transform="matrix(1 0 0 -1 0 288)"/><path fill="url(#SVG8SIKbbQY)" d="M0 224v-96c0 8 256 24 256 64v96c0-40-256-56-256-64" transform="matrix(1 0 0 -1 0 416)"/><path fill="url(#SVG8SIKbbQY)" d="M0 96V0c0 8 256 24 256 64v96c0-40-256-56-256-64" transform="matrix(1 0 0 -1 0 160)"/><path fill="url(#SVG8SIKbbQY)" d="M0 352v-96c0 8 256 24 256 64v96c0-40-256-56-256-64" transform="matrix(1 0 0 -1 0 672)"/></svg>

React

import type { SVGProps } from "react";

export function LogosScala(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 416"><defs><linearGradient id="SVGIoYDikML" x1="0%" x2="100%" y1="50%" y2="50%"><stop offset="0%" stopColor="#4f4f4f"/><stop offset="100%"/></linearGradient><linearGradient id="SVG8SIKbbQY" x1="0%" x2="100%" y1="50%" y2="50%"><stop offset="0%" stopColor="#c40000"/><stop offset="100%" stopColor="red"/></linearGradient></defs><path fill="url(#SVGIoYDikML)" d="M0 288v-32c0-5.394 116.377-14.428 192.2-32c36.628 8.49 63.8 18.969 63.8 32v32c0 13.024-27.172 23.51-63.8 32C116.376 302.425 0 293.39 0 288" transform="matrix(1 0 0 -1 0 544)"/><path fill="url(#SVGIoYDikML)" d="M0 160v-32c0-5.394 116.377-14.428 192.2-32c36.628 8.49 63.8 18.969 63.8 32v32c0 13.024-27.172 23.51-63.8 32C116.376 174.425 0 165.39 0 160" transform="matrix(1 0 0 -1 0 288)"/><path fill="url(#SVG8SIKbbQY)" d="M0 224v-96c0 8 256 24 256 64v96c0-40-256-56-256-64" transform="matrix(1 0 0 -1 0 416)"/><path fill="url(#SVG8SIKbbQY)" d="M0 96V0c0 8 256 24 256 64v96c0-40-256-56-256-64" transform="matrix(1 0 0 -1 0 160)"/><path fill="url(#SVG8SIKbbQY)" d="M0 352v-96c0 8 256 24 256 64v96c0-40-256-56-256-64" transform="matrix(1 0 0 -1 0 672)"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 416"><defs><linearGradient id="SVGIoYDikML" x1="0%" x2="100%" y1="50%" y2="50%"><stop offset="0%" stop-color="#4f4f4f"/><stop offset="100%"/></linearGradient><linearGradient id="SVG8SIKbbQY" x1="0%" x2="100%" y1="50%" y2="50%"><stop offset="0%" stop-color="#c40000"/><stop offset="100%" stop-color="red"/></linearGradient></defs><path fill="url(#SVGIoYDikML)" d="M0 288v-32c0-5.394 116.377-14.428 192.2-32c36.628 8.49 63.8 18.969 63.8 32v32c0 13.024-27.172 23.51-63.8 32C116.376 302.425 0 293.39 0 288" transform="matrix(1 0 0 -1 0 544)"/><path fill="url(#SVGIoYDikML)" d="M0 160v-32c0-5.394 116.377-14.428 192.2-32c36.628 8.49 63.8 18.969 63.8 32v32c0 13.024-27.172 23.51-63.8 32C116.376 174.425 0 165.39 0 160" transform="matrix(1 0 0 -1 0 288)"/><path fill="url(#SVG8SIKbbQY)" d="M0 224v-96c0 8 256 24 256 64v96c0-40-256-56-256-64" transform="matrix(1 0 0 -1 0 416)"/><path fill="url(#SVG8SIKbbQY)" d="M0 96V0c0 8 256 24 256 64v96c0-40-256-56-256-64" transform="matrix(1 0 0 -1 0 160)"/><path fill="url(#SVG8SIKbbQY)" d="M0 352v-96c0 8 256 24 256 64v96c0-40-256-56-256-64" transform="matrix(1 0 0 -1 0 672)"/></svg>
</template>

CSS

.icon-scala {
  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%20416%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGIoYDikML%22%20x1%3D%220%25%22%20x2%3D%22100%25%22%20y1%3D%2250%25%22%20y2%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%234f4f4f%22%2F%3E%3Cstop%20offset%3D%22100%25%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG8SIKbbQY%22%20x1%3D%220%25%22%20x2%3D%22100%25%22%20y1%3D%2250%25%22%20y2%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23c40000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22red%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGIoYDikML)%22%20d%3D%22M0%20288v-32c0-5.394%20116.377-14.428%20192.2-32c36.628%208.49%2063.8%2018.969%2063.8%2032v32c0%2013.024-27.172%2023.51-63.8%2032C116.376%20302.425%200%20293.39%200%20288%22%20transform%3D%22matrix(1%200%200%20-1%200%20544)%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGIoYDikML)%22%20d%3D%22M0%20160v-32c0-5.394%20116.377-14.428%20192.2-32c36.628%208.49%2063.8%2018.969%2063.8%2032v32c0%2013.024-27.172%2023.51-63.8%2032C116.376%20174.425%200%20165.39%200%20160%22%20transform%3D%22matrix(1%200%200%20-1%200%20288)%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8SIKbbQY)%22%20d%3D%22M0%20224v-96c0%208%20256%2024%20256%2064v96c0-40-256-56-256-64%22%20transform%3D%22matrix(1%200%200%20-1%200%20416)%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8SIKbbQY)%22%20d%3D%22M0%2096V0c0%208%20256%2024%20256%2064v96c0-40-256-56-256-64%22%20transform%3D%22matrix(1%200%200%20-1%200%20160)%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8SIKbbQY)%22%20d%3D%22M0%20352v-96c0%208%20256%2024%20256%2064v96c0-40-256-56-256-64%22%20transform%3D%22matrix(1%200%200%20-1%200%20672)%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%20416%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGIoYDikML%22%20x1%3D%220%25%22%20x2%3D%22100%25%22%20y1%3D%2250%25%22%20y2%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%234f4f4f%22%2F%3E%3Cstop%20offset%3D%22100%25%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG8SIKbbQY%22%20x1%3D%220%25%22%20x2%3D%22100%25%22%20y1%3D%2250%25%22%20y2%3D%2250%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23c40000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22red%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGIoYDikML)%22%20d%3D%22M0%20288v-32c0-5.394%20116.377-14.428%20192.2-32c36.628%208.49%2063.8%2018.969%2063.8%2032v32c0%2013.024-27.172%2023.51-63.8%2032C116.376%20302.425%200%20293.39%200%20288%22%20transform%3D%22matrix(1%200%200%20-1%200%20544)%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGIoYDikML)%22%20d%3D%22M0%20160v-32c0-5.394%20116.377-14.428%20192.2-32c36.628%208.49%2063.8%2018.969%2063.8%2032v32c0%2013.024-27.172%2023.51-63.8%2032C116.376%20174.425%200%20165.39%200%20160%22%20transform%3D%22matrix(1%200%200%20-1%200%20288)%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8SIKbbQY)%22%20d%3D%22M0%20224v-96c0%208%20256%2024%20256%2064v96c0-40-256-56-256-64%22%20transform%3D%22matrix(1%200%200%20-1%200%20416)%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8SIKbbQY)%22%20d%3D%22M0%2096V0c0%208%20256%2024%20256%2064v96c0-40-256-56-256-64%22%20transform%3D%22matrix(1%200%200%20-1%200%20160)%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG8SIKbbQY)%22%20d%3D%22M0%20352v-96c0%208%20256%2024%20256%2064v96c0-40-256-56-256-64%22%20transform%3D%22matrix(1%200%200%20-1%200%20672)%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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