hatenabookmark logo

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

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

Use the hatenabookmark logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.47 0A3.53 3.53 0 0 1 24 3.53v16.94A3.53 3.53 0 0 1 20.47 24H3.53A3.53 3.53 0 0 1 0 20.47V3.53A3.53 3.53 0 0 1 3.53 0zm-3.705 14.47a1.412 1.412 0 0 0 0 2.824c.78 0 1.41-.645 1.41-1.425s-.63-1.41-1.41-1.41zM8.61 17.247c1.2 0 2.056-.042 2.58-.12c.526-.084.976-.222 1.32-.412c.45-.232.78-.564 1.02-.99s.36-.915.36-1.48q0-1.17-.63-1.87c-.42-.48-.99-.734-1.74-.794c.66-.18 1.156-.45 1.456-.81c.315-.344.465-.824.465-1.424c0-.48-.103-.885-.3-1.26a2.34 2.34 0 0 0-.883-.87c-.345-.195-.735-.315-1.215-.405c-.464-.074-1.29-.12-2.474-.12H5.654v10.486H8.61zm.736-4.185q1.058 0 1.44.262c.27.18.39.495.39.93c0 .405-.135.69-.42.855c-.27.18-.765.254-1.44.254H8.31v-2.297h1.05zm8.656.706v-7.06h-2.46v7.06H18zM8.925 9.08q1.063 0 1.432.24q.367.239.367.83q0 .569-.39.804q-.396.231-1.452.232h-.57V9.08h.615z"/></svg>

React

import type { SVGProps } from "react";

export function SimpleIconsHatenabookmark(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="M20.47 0A3.53 3.53 0 0 1 24 3.53v16.94A3.53 3.53 0 0 1 20.47 24H3.53A3.53 3.53 0 0 1 0 20.47V3.53A3.53 3.53 0 0 1 3.53 0zm-3.705 14.47a1.412 1.412 0 0 0 0 2.824c.78 0 1.41-.645 1.41-1.425s-.63-1.41-1.41-1.41zM8.61 17.247c1.2 0 2.056-.042 2.58-.12c.526-.084.976-.222 1.32-.412c.45-.232.78-.564 1.02-.99s.36-.915.36-1.48q0-1.17-.63-1.87c-.42-.48-.99-.734-1.74-.794c.66-.18 1.156-.45 1.456-.81c.315-.344.465-.824.465-1.424c0-.48-.103-.885-.3-1.26a2.34 2.34 0 0 0-.883-.87c-.345-.195-.735-.315-1.215-.405c-.464-.074-1.29-.12-2.474-.12H5.654v10.486H8.61zm.736-4.185q1.058 0 1.44.262c.27.18.39.495.39.93c0 .405-.135.69-.42.855c-.27.18-.765.254-1.44.254H8.31v-2.297h1.05zm8.656.706v-7.06h-2.46v7.06H18zM8.925 9.08q1.063 0 1.432.24q.367.239.367.83q0 .569-.39.804q-.396.231-1.452.232h-.57V9.08h.615z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20.47 0A3.53 3.53 0 0 1 24 3.53v16.94A3.53 3.53 0 0 1 20.47 24H3.53A3.53 3.53 0 0 1 0 20.47V3.53A3.53 3.53 0 0 1 3.53 0zm-3.705 14.47a1.412 1.412 0 0 0 0 2.824c.78 0 1.41-.645 1.41-1.425s-.63-1.41-1.41-1.41zM8.61 17.247c1.2 0 2.056-.042 2.58-.12c.526-.084.976-.222 1.32-.412c.45-.232.78-.564 1.02-.99s.36-.915.36-1.48q0-1.17-.63-1.87c-.42-.48-.99-.734-1.74-.794c.66-.18 1.156-.45 1.456-.81c.315-.344.465-.824.465-1.424c0-.48-.103-.885-.3-1.26a2.34 2.34 0 0 0-.883-.87c-.345-.195-.735-.315-1.215-.405c-.464-.074-1.29-.12-2.474-.12H5.654v10.486H8.61zm.736-4.185q1.058 0 1.44.262c.27.18.39.495.39.93c0 .405-.135.69-.42.855c-.27.18-.765.254-1.44.254H8.31v-2.297h1.05zm8.656.706v-7.06h-2.46v7.06H18zM8.925 9.08q1.063 0 1.432.24q.367.239.367.83q0 .569-.39.804q-.396.231-1.452.232h-.57V9.08h.615z"/></svg>
</template>

CSS

.icon-hatenabookmark {
  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%22M20.47%200A3.53%203.53%200%200%201%2024%203.53v16.94A3.53%203.53%200%200%201%2020.47%2024H3.53A3.53%203.53%200%200%201%200%2020.47V3.53A3.53%203.53%200%200%201%203.53%200zm-3.705%2014.47a1.412%201.412%200%200%200%200%202.824c.78%200%201.41-.645%201.41-1.425s-.63-1.41-1.41-1.41zM8.61%2017.247c1.2%200%202.056-.042%202.58-.12c.526-.084.976-.222%201.32-.412c.45-.232.78-.564%201.02-.99s.36-.915.36-1.48q0-1.17-.63-1.87c-.42-.48-.99-.734-1.74-.794c.66-.18%201.156-.45%201.456-.81c.315-.344.465-.824.465-1.424c0-.48-.103-.885-.3-1.26a2.34%202.34%200%200%200-.883-.87c-.345-.195-.735-.315-1.215-.405c-.464-.074-1.29-.12-2.474-.12H5.654v10.486H8.61zm.736-4.185q1.058%200%201.44.262c.27.18.39.495.39.93c0%20.405-.135.69-.42.855c-.27.18-.765.254-1.44.254H8.31v-2.297h1.05zm8.656.706v-7.06h-2.46v7.06H18zM8.925%209.08q1.063%200%201.432.24q.367.239.367.83q0%20.569-.39.804q-.396.231-1.452.232h-.57V9.08h.615z%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%22M20.47%200A3.53%203.53%200%200%201%2024%203.53v16.94A3.53%203.53%200%200%201%2020.47%2024H3.53A3.53%203.53%200%200%201%200%2020.47V3.53A3.53%203.53%200%200%201%203.53%200zm-3.705%2014.47a1.412%201.412%200%200%200%200%202.824c.78%200%201.41-.645%201.41-1.425s-.63-1.41-1.41-1.41zM8.61%2017.247c1.2%200%202.056-.042%202.58-.12c.526-.084.976-.222%201.32-.412c.45-.232.78-.564%201.02-.99s.36-.915.36-1.48q0-1.17-.63-1.87c-.42-.48-.99-.734-1.74-.794c.66-.18%201.156-.45%201.456-.81c.315-.344.465-.824.465-1.424c0-.48-.103-.885-.3-1.26a2.34%202.34%200%200%200-.883-.87c-.345-.195-.735-.315-1.215-.405c-.464-.074-1.29-.12-2.474-.12H5.654v10.486H8.61zm.736-4.185q1.058%200%201.44.262c.27.18.39.495.39.93c0%20.405-.135.69-.42.855c-.27.18-.765.254-1.44.254H8.31v-2.297h1.05zm8.656.706v-7.06h-2.46v7.06H18zM8.925%209.08q1.063%200%201.432.24q.367.239.367.83q0%20.569-.39.804q-.396.231-1.452.232h-.57V9.08h.615z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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