Gentleface › Social & emotions › bookmark-tag

bookmark-tag icon

Bookmark tag: bookmark tags, tag bookmark. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.14 2.264C2.242 2.007 2.391 1.781 2.586 1.586C2.781 1.391 3.007 1.242 3.264 1.14C3.5 1.047 3.746 1 4 1L7 1C7.254 1 7.5 1.047 7.736 1.14C7.993 1.242 8.219 1.391 8.414 1.586C8.609 1.781 8.758 2.007 8.86 2.264C8.953 2.5 9 2.746 9 3L9 5.5C9 5.641 8.952 5.759 8.856 5.856C8.759 5.952 8.641 6 8.5 6C8.359 6 8.241 5.952 8.144 5.856C8.048 5.759 8 5.641 8 5.5L8 3C8 2.724 7.902 2.488 7.707 2.293C7.512 2.098 7.276 2 7 2L4 2C3.724 2 3.488 2.098 3.293 2.293C3.098 2.488 3 2.724 3 3L3 10.293L4.793 8.5C4.904 8.389 5.034 8.308 5.184 8.258C5.333 8.209 5.486 8.195 5.641 8.217C5.781 8.237 5.892 8.301 5.973 8.41C5.983 8.423 5.992 8.436 6 8.45L6 8.972C5.968 9.025 5.925 9.072 5.871 9.112C5.76 9.195 5.637 9.227 5.5 9.207L2.854 11.854C2.754 11.953 2.636 12.003 2.5 12.003C2.364 12.003 2.246 11.953 2.146 11.854C2.049 11.756 2 11.638 2 11.5L2 3C2 2.746 2.047 2.5 2.14 2.264ZM15.586 11.5C15.586 11.776 15.488 12.012 15.293 12.207L12.207 15.293C12.012 15.488 11.776 15.586 11.5 15.586C11.224 15.586 10.988 15.488 10.793 15.293L7.293 11.793C7.098 11.598 7 11.362 7 11.086L7 8C7 7.724 7.098 7.488 7.293 7.293C7.488 7.098 7.724 7 8 7L11.086 7C11.362 7 11.598 7.098 11.793 7.293L15.293 10.793C15.488 10.988 15.586 11.224 15.586 11.5ZM10 11C10.552 11 11 10.552 11 10C11 9.448 10.552 9 10 9C9.448 9 9 9.448 9 10C9 10.552 9.448 11 10 11Z"/></svg>

React

// Gentleface "bookmark-tag" (line-round), MIT. https://gentleface.com/icons/bookmark-tag
import type { SVGProps } from 'react';

export function BookmarkTagIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M2.14 2.264C2.242 2.007 2.391 1.781 2.586 1.586C2.781 1.391 3.007 1.242 3.264 1.14C3.5 1.047 3.746 1 4 1L7 1C7.254 1 7.5 1.047 7.736 1.14C7.993 1.242 8.219 1.391 8.414 1.586C8.609 1.781 8.758 2.007 8.86 2.264C8.953 2.5 9 2.746 9 3L9 5.5C9 5.641 8.952 5.759 8.856 5.856C8.759 5.952 8.641 6 8.5 6C8.359 6 8.241 5.952 8.144 5.856C8.048 5.759 8 5.641 8 5.5L8 3C8 2.724 7.902 2.488 7.707 2.293C7.512 2.098 7.276 2 7 2L4 2C3.724 2 3.488 2.098 3.293 2.293C3.098 2.488 3 2.724 3 3L3 10.293L4.793 8.5C4.904 8.389 5.034 8.308 5.184 8.258C5.333 8.209 5.486 8.195 5.641 8.217C5.781 8.237 5.892 8.301 5.973 8.41C5.983 8.423 5.992 8.436 6 8.45L6 8.972C5.968 9.025 5.925 9.072 5.871 9.112C5.76 9.195 5.637 9.227 5.5 9.207L2.854 11.854C2.754 11.953 2.636 12.003 2.5 12.003C2.364 12.003 2.246 11.953 2.146 11.854C2.049 11.756 2 11.638 2 11.5L2 3C2 2.746 2.047 2.5 2.14 2.264ZM15.586 11.5C15.586 11.776 15.488 12.012 15.293 12.207L12.207 15.293C12.012 15.488 11.776 15.586 11.5 15.586C11.224 15.586 10.988 15.488 10.793 15.293L7.293 11.793C7.098 11.598 7 11.362 7 11.086L7 8C7 7.724 7.098 7.488 7.293 7.293C7.488 7.098 7.724 7 8 7L11.086 7C11.362 7 11.598 7.098 11.793 7.293L15.293 10.793C15.488 10.988 15.586 11.224 15.586 11.5ZM10 11C10.552 11 11 10.552 11 10C11 9.448 10.552 9 10 9C9.448 9 9 9.448 9 10C9 10.552 9.448 11 10 11Z" />
    </svg>
  );
}

Vue

Vue: see /icons/bookmark-tag.md

Svelte

Svelte: see /icons/bookmark-tag.md

HTML img

HTML img: see /icons/bookmark-tag.md

CSS

CSS: see /icons/bookmark-tag.md

Data URL

Data URL: see /icons/bookmark-tag.md

Sprite

Sprite: see /icons/bookmark-tag.md

SwiftUI

SwiftUI: see /icons/bookmark-tag.md

Compose

Compose: see /icons/bookmark-tag.md

Android XML

Android XML: see /icons/bookmark-tag.md

Flutter

Flutter: see /icons/bookmark-tag.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { BookmarkTagIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

bookmark tags, tag bookmark

Example

Tag a bookmark in a read-later app

Built from

bookmark + tag

Tags

bookmark, save, later, ribbon, tag

Category

Social & emotions

Component name

BookmarkTagIcon

History

2026-11-07 added, released in 0.5.0

Since

version 0.5.0

Family 13

bookmark bookmark-alert bookmark-check bookmark-heart bookmark-link bookmark-off bookmark-pencil bookmark-plus bookmark-search bookmark-star bookmark-sync bookmark-x

More social & emotions icons

balloon circle-fading-plus face-angry face-crying face-grinning face-neutral face-nod face-surprised face-wink flame flame-off frown hand-heart heart heart-arrow heart-check · all social & emotions icons

For agents

Metadata: /icons/bookmark-tag.json · Markdown: /icons/bookmark-tag.md · SVG: https://gentleface.com/svg/{style}/16/bookmark-tag.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/bookmark-tag.png

bookmark-tag icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp