Home/Libraries/Fluent Emoji (Iconify)/bookmark

Fluent Emoji (Iconify)

Bookmark

License: MITCommercial Safe

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><g fill="none"><g filter="url(#iNvy4Zb)"><path fill="url(#iCYt7qd)" fill-rule="evenodd" d="M21.781 2.7a1.3 1.3 0 0 0-1.838 0L2.699 19.944a1.224 1.224 0 0 0 1.027 2.078l5.62-.748a1.25 1.25 0 0 1 1.4 1.425l-.84 5.567a1.232 1.232 0 0 0 2.088 1.054l17.285-17.284a1.3 1.3 0 0 0 0-1.839zm1.505 8.057c1.093 0 1.978-.899 1.978-2.008s-.885-2.008-1.978-2.008s-1.979.9-1.979 2.008s.886 2.008 1.979 2.008" clip-rule="evenodd"/></g><g filter="url(#iMKxBpe)"><path fill="#818cf8" d="M18.943 12.339a.6.6 0 0 1 .734.747l-.388 1.325a.5.5 0 0 0 .063.417l.77 1.162a.6.6 0 0 1-.501.93H18.28a.5.5 0 0 0-.43.246l-.63 1.06a.6.6 0 0 1-1.069-.075l-.621-1.48a.5.5 0 0 0-.278-.273l-1.41-.554a.6.6 0 0 1-.11-1.06l1.12-.74a.5.5 0 0 0 .224-.396l.054-1.302a.6.6 0 0 1 .94-.468l1.1.762a.5.5 0 0 0 .417.07z"/></g><rect width="1.008" height="5.031" x="24.268" y="1.741" fill="url(#itqgPsP)" rx=".504"/><rect width="1.008" height="5.031" x="24.268" y="1.741" fill="url(#iKEOqCd)" rx=".504"/><rect width="1.008" height="5.031" fill="url(#ij6yNCc)" rx=".504" transform="matrix(0 -1 -1 0 30.276 7.75)"/><rect width="1.008" height="5.031" fill="url(#iLtYCdb)" rx=".504" transform="matrix(0 -1 -1 0 30.276 7.75)"/><g filter="url(#i3VuUVZ)"><rect width="1.008" height="1.597" fill="#818cf8" rx=".504" transform="scale(-1 1)rotate(-45 -4.995 34.8)"/></g><g filter="url(#ip4Isqc)"><rect width=".274" height="1.064" fill="url(#irm3djd)" rx=".137" transform="scale(-1 1)rotate(-45 -4.949 34.32)"/></g><g filter="url(#iiPG3fd)"><rect width=".267" height="4.395" x="24.839" y="2.06" fill="url(#ihUV1kD)" rx=".134"/></g><g filter="url(#iUctsze)"><rect width=".267" height="4.395" x="30.115" y="6.978" fill="url(#iE10MDc)" rx=".134" transform="rotate(90 30.115 6.978)"/></g><defs><filter id="iNvy4Zb" width="27.719" height="27.562" x="2.14" y="2.319" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.2" dy=".2"/><feGaussianBlur stdDeviation=".1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.384314 0 0 0 0 0.376471 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21265"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".2" dy=".2"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.780392 0 0 0 0 0.215686 0 0 0 0 0.231373 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_21265" result="effect2_innerShadow_18_21265"/></filter><filter id="iMKxBpe" width="7.66" height="7.149" x="12.962" y="11.37" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".4" dy="-.4"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.592157 0 0 0 0 0.65098 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21265"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.5"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.443137 0 0 0 0 0.52549 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_21265" result="effect2_innerShadow_18_21265"/></filter><filter id="i3VuUVZ" width="1.424" height="1.674" x="24.437" y="5.906" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.25"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.796078 0 0 0 0 0.396078 0 0 0 0 0.329412 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21265"/></filter><filter id="ip4Isqc" width="1.332" height="1.332" x="24.579" y="6.166" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_21265" stdDeviation=".125"/></filter><filter id="iiPG3fd" width=".767" height="4.895" x="24.589" y="1.81" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_21265" stdDeviation=".125"/></filter><filter id="iUctsze" width="4.895" height=".767" x="25.471" y="6.728" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_21265" stdDeviation=".125"/></filter><radialGradient id="iKEOqCd" cx="0" cy="0" r="1" gradientTransform="matrix(-.82629 .70313 -.5039 -.59218 25.276 6.32)" gradientUnits="userSpaceOnUse"><stop offset=".421" stop-color="#CA6533"/><stop offset="1" stop-color="#CA6533" stop-opacity="0"/></radialGradient><radialGradient id="iLtYCdb" cx="0" cy="0" r="1" gradientTransform="matrix(-.5625 .57813 -.27008 -.26278 .82 4.654)" gradientUnits="userSpaceOnUse"><stop stop-color="#CD6C36"/><stop offset="1" stop-color="#CD6C36" stop-opacity="0"/></radialGradient><radialGradient id="irm3djd" cx="0" cy="0" r="1" gradientTransform="matrix(0 .88476 -1.57771 0 .137 -.137)" gradientUnits="userSpaceOnUse"><stop offset=".135" stop-color="#D99666"/><stop offset="1" stop-color="#D99666" stop-opacity="0"/></radialGradient><radialGradient id="iE10MDc" cx="0" cy="0" r="1" gradientTransform="matrix(0 .8136 -.26565 0 30.249 6.978)" gradientUnits="userSpaceOnUse"><stop offset=".135" stop-color="#D99666"/><stop offset="1" stop-color="#D99666" stop-opacity="0"/></radialGradient><linearGradient id="iCYt7qd" x1="26.34" x2="8.84" y1="7.21" y2="24.523" gradientUnits="userSpaceOnUse"><stop stop-color="#FF454E"/><stop offset="1" stop-color="#F0305C"/></linearGradient><linearGradient id="itqgPsP" x1="25.276" x2="24.268" y1="4.804" y2="4.804" gradientUnits="userSpaceOnUse"><stop stop-color="#CF8B51"/><stop offset="1" stop-color="#CB662E"/></linearGradient><linearGradient id="ij6yNCc" x1="1.008" x2="0" y1="3.063" y2="3.063" gradientUnits="userSpaceOnUse"><stop stop-color="#CE8149"/><stop offset="1" stop-color="#D46F51"/></linearGradient><linearGradient id="ihUV1kD" x1="24.972" x2="24.972" y1="2.06" y2="8.569" gradientUnits="userSpaceOnUse"><stop stop-color="#D99666"/><stop offset="1" stop-color="#D99666" stop-opacity="0"/></linearGradient></defs></g></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. BookmarkIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.