Bookmark icon
A hand-drawn bookmark icon that animates on its own: an SVG on a 24px grid in thin, regular and bold strokes. Free to download and use in the apps you build (LumioUI License). It takes your text colour through currentColor.
- Category
- Interface
- Grid
- 24 × 24
- Strokes
- 1.5 · 2 · 2.5
- Name
bookmark
Stroke weights and sizes
Use it in React Native
The Icon component draws bookmark by name, sized and coloured from your theme. Add it with npx @lumioui/cli add icon.
TSX Example.tsx
import { Icon } from "@/components/ui/icon";
<Icon name="bookmark" size={24} />
// colour and stroke follow your theme; pass color / strokeWidth to override SVG code
The still glyph. The animated version, linked above, plays its motion on its own with SMIL, so it needs no script.
SVG bookmark.svg
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M6.8 3.8L17.2 3.8C18.1 3.8 18.8 4.5 18.8 5.4L18.8 20L12 15.6L5.2 20L5.2 5.4C5.2 4.5 5.9 3.8 6.8 3.8Z" stroke-dasharray="61"></path></svg> On the web, link it straight from the CDN:
HTML index.html
<img src="https://cdn.lumioui.com/iconset/static/bookmark.svg" width="24" height="24" alt="Bookmark" /> Where LumioUI uses it
- Animated Icons component
- Expandable Control component
- Glass Dock Morph component
- Post Card component
- Save Button component
- Agenda List component
- Fab component
- Icon component
- Like Button component
- Media Controls component
- Share Button component
- Share Sheet component
- Onboarding Editorial screen
- Home Editorial screen
- Home Feed screen
- Workout Detail screen
- Job Detail screen
- Job Feed screen
- Audiobook Player screen
- Podcast Player screen
- Reels Feed screen
- Sound Mixer screen
- Article Reader screen
- News Editorial screen
Related icons
Bookmark Add01
Bookmark Add02
Bookmark Block01
Bookmark Block02
Bookmark Check01
Bookmark Check02
Bookmark Minus01
Bookmark Minus02
A Arrow Down
A Arrow Up
A Large Small
Align Center
Align Center Horizontal
Align Center Vertical
Align End Horizontal
Align End Vertical
Align Horizontal Distribute Center
Align Horizontal Distribute End