Bookmark Add icon
Used in saving scenarios. The Bookmark Add icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Bookmark Add icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { BookmarkAdd24Regular, BookmarkAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <BookmarkAdd24Regular aria-label="Bookmark Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_bookmark_add_24_regular.svg" width="24" height="24" alt="Bookmark Add"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.9995 6.5C22.9995 3.46243 20.5371 1 17.4995 1C14.4619 1 11.9995 3.46243 11.9995 6.5C11.9995 9.53757 14.4619 12 17.4995 12C20.5371 12 22.9995 9.53757 22.9995 6.5ZM18.0002 7.00001L18.0006 9.50352C18.0006 9.77966 17.7768 10.0035 17.5006 10.0035C17.2245 10.0035 17.0006 9.77966 17.0006 9.50352L17.0002 7.00001H14.4951C14.2192 7.00001 13.9956 6.77615 13.9956 6.50001C13.9956 6.22387 14.2192 6.00001 14.4951 6.00001H17L16.9995 3.49927C16.9995 3.22313 17.2234 2.99927 17.4995 2.99927C17.7757 2.99927 17.9995 3.22313 17.9995 3.49927L18 6.00001H20.4961C20.772 6.00001 20.9956 6.22387 20.9956 6.50001C20.9956 6.77615 20.772 7.00001 20.4961 7.00001H18.0002ZM17.5003 19.7815V13C18.0166 12.9999 18.5188 12.9397 19.0003 12.8259V21.2451C19.0003 21.8563 18.3085 22.2108 17.8123 21.8539L12.0011 17.6729L6.18997 21.8539C5.69383 22.2108 5.00195 21.8563 5.00195 21.2451V6.24915C5.00195 4.45422 6.45703 2.99915 8.25195 2.99915H12.0219C11.7252 3.46235 11.4857 3.96566 11.3133 4.49915H8.25195C7.28545 4.49915 6.50195 5.28265 6.50195 6.24915V19.7815L11.5631 16.1402C11.8248 15.9519 12.1775 15.9519 12.4392 16.1402L17.5003 19.7815Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/bookmark_add_24_regular.svg";Details
| Name | Bookmark Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_bookmark_add_24_regular.svg |
| Filled file | ic_fluent_bookmark_add_24_filled.svg |
| React components | BookmarkAdd24Regular, BookmarkAdd24Filled |
| License | MIT (© Microsoft Corporation) |