bilibili logo

bilibili from LobeHub AI Icons by LobeHub · Mono · MIT Free for personal and commercial use.

Name: bilibili
Set: LobeHub AI Icons
Style: Mono
Viewbox: 24×24
License: MIT

2 other variants in LobeHub AI Icons

The same logo in other sets

bilibili-filledAnt Design Icons bilibiliFont Awesome 6 Brands bilibiliFont Awesome Brands bilibili-fillMingCute Icon bilibili-fillRemix Icon bilibiliSimple Icons

Use the bilibili logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.977 3.561a1.31 1.31 0 111.818-1.884l2.828 2.728c.08.078.149.163.205.254h4.277a1.32 1.32 0 01.205-.254l2.828-2.728a1.31 1.31 0 011.818 1.884L17.82 4.66h.848A5.333 5.333 0 0124 9.992v7.34a5.333 5.333 0 01-5.333 5.334H5.333A5.333 5.333 0 010 17.333V9.992a5.333 5.333 0 015.333-5.333h.781L4.977 3.56zm.356 3.67a2.667 2.667 0 00-2.666 2.667v7.529a2.667 2.667 0 002.666 2.666h13.334a2.667 2.667 0 002.666-2.666v-7.53a2.667 2.667 0 00-2.666-2.666H5.333zm1.334 5.192a1.333 1.333 0 112.666 0v1.192a1.333 1.333 0 11-2.666 0v-1.192zM16 11.09c-.736 0-1.333.597-1.333 1.333v1.192a1.333 1.333 0 102.666 0v-1.192c0-.736-.597-1.333-1.333-1.333z" clip-rule="evenodd"/></svg>

React

import type { SVGProps } from "react";

export function LobehubBilibili(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" fillRule="evenodd" d="M4.977 3.561a1.31 1.31 0 111.818-1.884l2.828 2.728c.08.078.149.163.205.254h4.277a1.32 1.32 0 01.205-.254l2.828-2.728a1.31 1.31 0 011.818 1.884L17.82 4.66h.848A5.333 5.333 0 0124 9.992v7.34a5.333 5.333 0 01-5.333 5.334H5.333A5.333 5.333 0 010 17.333V9.992a5.333 5.333 0 015.333-5.333h.781L4.977 3.56zm.356 3.67a2.667 2.667 0 00-2.666 2.667v7.529a2.667 2.667 0 002.666 2.666h13.334a2.667 2.667 0 002.666-2.666v-7.53a2.667 2.667 0 00-2.666-2.666H5.333zm1.334 5.192a1.333 1.333 0 112.666 0v1.192a1.333 1.333 0 11-2.666 0v-1.192zM16 11.09c-.736 0-1.333.597-1.333 1.333v1.192a1.333 1.333 0 102.666 0v-1.192c0-.736-.597-1.333-1.333-1.333z" clipRule="evenodd"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.977 3.561a1.31 1.31 0 111.818-1.884l2.828 2.728c.08.078.149.163.205.254h4.277a1.32 1.32 0 01.205-.254l2.828-2.728a1.31 1.31 0 011.818 1.884L17.82 4.66h.848A5.333 5.333 0 0124 9.992v7.34a5.333 5.333 0 01-5.333 5.334H5.333A5.333 5.333 0 010 17.333V9.992a5.333 5.333 0 015.333-5.333h.781L4.977 3.56zm.356 3.67a2.667 2.667 0 00-2.666 2.667v7.529a2.667 2.667 0 002.666 2.666h13.334a2.667 2.667 0 002.666-2.666v-7.53a2.667 2.667 0 00-2.666-2.666H5.333zm1.334 5.192a1.333 1.333 0 112.666 0v1.192a1.333 1.333 0 11-2.666 0v-1.192zM16 11.09c-.736 0-1.333.597-1.333 1.333v1.192a1.333 1.333 0 102.666 0v-1.192c0-.736-.597-1.333-1.333-1.333z" clip-rule="evenodd"/></svg>
</template>

CSS

.icon-bilibili {
  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%20fill-rule%3D%22evenodd%22%20d%3D%22M4.977%203.561a1.31%201.31%200%20111.818-1.884l2.828%202.728c.08.078.149.163.205.254h4.277a1.32%201.32%200%2001.205-.254l2.828-2.728a1.31%201.31%200%20011.818%201.884L17.82%204.66h.848A5.333%205.333%200%200124%209.992v7.34a5.333%205.333%200%2001-5.333%205.334H5.333A5.333%205.333%200%20010%2017.333V9.992a5.333%205.333%200%20015.333-5.333h.781L4.977%203.56zm.356%203.67a2.667%202.667%200%2000-2.666%202.667v7.529a2.667%202.667%200%20002.666%202.666h13.334a2.667%202.667%200%20002.666-2.666v-7.53a2.667%202.667%200%2000-2.666-2.666H5.333zm1.334%205.192a1.333%201.333%200%20112.666%200v1.192a1.333%201.333%200%2011-2.666%200v-1.192zM16%2011.09c-.736%200-1.333.597-1.333%201.333v1.192a1.333%201.333%200%20102.666%200v-1.192c0-.736-.597-1.333-1.333-1.333z%22%20clip-rule%3D%22evenodd%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%20fill-rule%3D%22evenodd%22%20d%3D%22M4.977%203.561a1.31%201.31%200%20111.818-1.884l2.828%202.728c.08.078.149.163.205.254h4.277a1.32%201.32%200%2001.205-.254l2.828-2.728a1.31%201.31%200%20011.818%201.884L17.82%204.66h.848A5.333%205.333%200%200124%209.992v7.34a5.333%205.333%200%2001-5.333%205.334H5.333A5.333%205.333%200%20010%2017.333V9.992a5.333%205.333%200%20015.333-5.333h.781L4.977%203.56zm.356%203.67a2.667%202.667%200%2000-2.666%202.667v7.529a2.667%202.667%200%20002.666%202.666h13.334a2.667%202.667%200%20002.666-2.666v-7.53a2.667%202.667%200%2000-2.666-2.666H5.333zm1.334%205.192a1.333%201.333%200%20112.666%200v1.192a1.333%201.333%200%2011-2.666%200v-1.192zM16%2011.09c-.736%200-1.333.597-1.333%201.333v1.192a1.333%201.333%200%20102.666%200v-1.192c0-.736-.597-1.333-1.333-1.333z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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