pnpm logo

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

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

1 other variant in Devicon

pnpm-wordmark

The same logo in other sets

pnpmCatppuccin IconspnpmSVG LogospnpmPixelarticonspnpmSimple Iconspnpm-darkSkill Icons

Use the pnpm logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#f8ab00" d="M0 .004V40h39.996V.004Zm43.996 0V40h40V.004Zm44.008 0V40H128V.004Zm0 43.996v39.996H128V44Z"/><path fill="#4c4c4c" d="M43.996 44v39.996h40V44ZM0 87.996v40h39.996v-40Zm43.996 0v40h40v-40Zm44.008 0v40H128v-40Z"/></svg>

React

import type { SVGProps } from "react";

export function DeviconPnpm(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#f8ab00" d="M0 .004V40h39.996V.004Zm43.996 0V40h40V.004Zm44.008 0V40H128V.004Zm0 43.996v39.996H128V44Z"/><path fill="#4c4c4c" d="M43.996 44v39.996h40V44ZM0 87.996v40h39.996v-40Zm43.996 0v40h40v-40Zm44.008 0v40H128v-40Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path fill="#f8ab00" d="M0 .004V40h39.996V.004Zm43.996 0V40h40V.004Zm44.008 0V40H128V.004Zm0 43.996v39.996H128V44Z"/><path fill="#4c4c4c" d="M43.996 44v39.996h40V44ZM0 87.996v40h39.996v-40Zm43.996 0v40h40v-40Zm44.008 0v40H128v-40Z"/></svg>
</template>

CSS

.icon-pnpm {
  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%23f8ab00%22%20d%3D%22M0%20.004V40h39.996V.004Zm43.996%200V40h40V.004Zm44.008%200V40H128V.004Zm0%2043.996v39.996H128V44Z%22%2F%3E%3Cpath%20fill%3D%22%234c4c4c%22%20d%3D%22M43.996%2044v39.996h40V44ZM0%2087.996v40h39.996v-40Zm43.996%200v40h40v-40Zm44.008%200v40H128v-40Z%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%23f8ab00%22%20d%3D%22M0%20.004V40h39.996V.004Zm43.996%200V40h40V.004Zm44.008%200V40H128V.004Zm0%2043.996v39.996H128V44Z%22%2F%3E%3Cpath%20fill%3D%22%234c4c4c%22%20d%3D%22M43.996%2044v39.996h40V44ZM0%2087.996v40h39.996v-40Zm43.996%200v40h40v-40Zm44.008%200v40H128v-40Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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