Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

VS Code Icons · VscBookmark

Bookmark icon

A free bookmark icon from VS Code Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known asstar iconfavorite iconrating iconreview iconsave iconsaved iconribbon icontag icon
License
CC BY 4.0 license
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/bookmark.json
components/icons/vscode-codicons-bookmark.tsx
import * as React from "react";

/**
 * Bookmark from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/bookmark. Sized in em, colored by currentColor.
 */
export function VscBookmarkIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M3.77942 13.9187C3.44716 14.1405 3.00177 13.9024 3.00177 13.5029V4.01167C3.00177 2.9085 3.89502 2.01365 4.99819 2.01168L10.9982 2.00092C12.1028 1.99895 12.9998 2.89277 13.0018 3.99734V13.5029C13.0018 13.9024 12.5564 14.1405 12.2241 13.9187L8.00177 11.0994L3.77942 13.9187ZM12.0018 4.00092L11.9948 3.88252C11.9362 3.38529 11.5128 3.00001 11 3.00092L4.99998 3.01168C4.44839 3.01266 4.00177 3.46009 4.00177 4.01167V12.5678L7.72412 10.0824C7.89221 9.97018 8.11133 9.97018 8.27942 10.0824L12.0018 12.5678V4.00092Z"
      />
    </svg>
  );
}
With react-icons
import { VscBookmark } from "react-icons/vsc";

export function Example() {
  return <VscBookmark className="size-5" />;
}
bookmark.svg
<svg
  viewBox="0 0 16 16"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M3.77942 13.9187C3.44716 14.1405 3.00177 13.9024 3.00177 13.5029V4.01167C3.00177 2.9085 3.89502 2.01365 4.99819 2.01168L10.9982 2.00092C12.1028 1.99895 12.9998 2.89277 13.0018 3.99734V13.5029C13.0018 13.9024 12.5564 14.1405 12.2241 13.9187L8.00177 11.0994L3.77942 13.9187ZM12.0018 4.00092L11.9948 3.88252C11.9362 3.38529 11.5128 3.00001 11 3.00092L4.99998 3.01168C4.44839 3.01266 4.00177 3.46009 4.00177 4.01167V12.5678L7.72412 10.0824C7.89221 9.97018 8.11133 9.97018 8.27942 10.0824L12.0018 12.5678V4.00092Z"
  />
</svg>
Attribution
"Bookmark" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: star, favorite, rating, review

Bookmark icon in other sets