bookmarks icon

bookmarks-fill from MingCute Icon by MingCute Design · Fill · Apache-2.0 Free for personal and commercial use.

Name: bookmarks-fill
Set: MingCute Icon
Style: Fill
Viewbox: 24×24
License: Apache 2.0

1 other variant in MingCute Icon

The same icon in other sets

bookmarksBootstrap Icons bookmarksBoxIcons v2 bookmarksBoxIcons v2 Solid bookmarksIonIcons bookmarksMaterial Symbols bookmarksMaterial Symbols Light bookmarksPhosphor bookmarksPixelarticons bookmarksTabler Icons

Use the bookmarks icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17 2a3 3 0 0 1 3 3v13.019c0 1.225-1.39 1.933-2.382 1.212l-.618-.45v2.238c0 1.225-1.39 1.933-2.382 1.212L10.5 19.236l-4.118 2.995C5.39 22.952 4 22.244 4 21.02V8a3 3 0 0 1 3-3a3 3 0 0 1 3-3zm-7 2a1 1 0 0 0-1 1h5a3 3 0 0 1 3 3v8.309l1 .727V5a1 1 0 0 0-1-1z"/></svg>

React

import type { SVGProps } from "react";

export function MingcuteBookmarksFill(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="M17 2a3 3 0 0 1 3 3v13.019c0 1.225-1.39 1.933-2.382 1.212l-.618-.45v2.238c0 1.225-1.39 1.933-2.382 1.212L10.5 19.236l-4.118 2.995C5.39 22.952 4 22.244 4 21.02V8a3 3 0 0 1 3-3a3 3 0 0 1 3-3zm-7 2a1 1 0 0 0-1 1h5a3 3 0 0 1 3 3v8.309l1 .727V5a1 1 0 0 0-1-1z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M17 2a3 3 0 0 1 3 3v13.019c0 1.225-1.39 1.933-2.382 1.212l-.618-.45v2.238c0 1.225-1.39 1.933-2.382 1.212L10.5 19.236l-4.118 2.995C5.39 22.952 4 22.244 4 21.02V8a3 3 0 0 1 3-3a3 3 0 0 1 3-3zm-7 2a1 1 0 0 0-1 1h5a3 3 0 0 1 3 3v8.309l1 .727V5a1 1 0 0 0-1-1z"/></svg>
</template>

CSS

.icon-bookmarks-fill {
  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%22M17%202a3%203%200%200%201%203%203v13.019c0%201.225-1.39%201.933-2.382%201.212l-.618-.45v2.238c0%201.225-1.39%201.933-2.382%201.212L10.5%2019.236l-4.118%202.995C5.39%2022.952%204%2022.244%204%2021.02V8a3%203%200%200%201%203-3a3%203%200%200%201%203-3zm-7%202a1%201%200%200%200-1%201h5a3%203%200%200%201%203%203v8.309l1%20.727V5a1%201%200%200%200-1-1z%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%22M17%202a3%203%200%200%201%203%203v13.019c0%201.225-1.39%201.933-2.382%201.212l-.618-.45v2.238c0%201.225-1.39%201.933-2.382%201.212L10.5%2019.236l-4.118%202.995C5.39%2022.952%204%2022.244%204%2021.02V8a3%203%200%200%201%203-3a3%203%200%200%201%203-3zm-7%202a1%201%200%200%200-1%201h5a3%203%200%200%201%203%203v8.309l1%20.727V5a1%201%200%200%200-1-1z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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