devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt

Icônes marque-page gratuites (SVG)

48 icônes marque-page issues de bibliothèques open source : cliquez sur l’une d’elles pour modifier sa taille, sa couleur et son trait, puis copiez-la en SVG, JSX, data URI ou CSS.

Mis à jour le

bookmark
Lucidebookmark
Tablerbookmark
Heroiconsbookmark
Phosphorbookmark
Bootstrap Iconsbookmark
Iconoirbookmark-12-filled
Fluent UIbookmark
Material Symbolsbookmark
Material Design Iconsbookmark
Carbonbookmark-x
Lucidebookmark-filled
Tablerbookmark-16-solid
Heroiconsbookmark-bold
Phosphorbookmark-fill
Bootstrap Iconsbookmark-solid
Iconoirbookmark-12-regular
Fluent UIbookmark-outline
Material Symbolsbookmark-outline
Material Design Iconsbookmark-filled
Carbonbookmark-off
Lucidebookmark-ai
Tablerbookmark-20-solid
Heroiconsbookmark-duotone
Phosphorbookmark-x
Bootstrap Iconsbookmark-book
Iconoirbookmark-16-filled
Fluent UIbookmark-outline-rounded
Material Symbolsbookmark-box
Material Design Iconsbookmark-add
Carbonbook-bookmark
Lucidebookmark-off
Tablerbookmark-solid
Heroiconsbookmark-fill
Phosphorbookmark-x-fill
Bootstrap Iconsbookmark-16-regular
Fluent UIbookmark-outline-sharp
Material Symbolsbookmark-box-outline
Material Design Iconsbookmark-plus
Lucidebookmark-edit
Tablerbookmark-light
Phosphorbookmark-dash
Bootstrap Iconsbookmark-20-filled
Fluent UIbookmark-rounded
Material Symbolsbookmark-off
Material Design Iconsbookmark-plus
Tablerbookmark-thin
Phosphorbookmark-dash-fill
Bootstrap Icons

Utiliser les icônes marque-page

Les marque-pages permettent d’enregistrer des éléments à lire ou à utiliser plus tard.

Toutes les icônes proposées ici suivent currentColor, elles prennent donc la couleur de texte de l’élément dans lequel elles se trouvent — un seul SVG fonctionne sur fonds clairs comme sombres, dans les liens comme dans les boutons. Définissez explicitement width et height (ou dimensionnez-les en CSS avec 1em) afin que la mise en page ne bouge pas pendant le chargement de la page.

Icônes accessibles

Si l’icône est purement décorative ou se trouve à côté d’un texte visible, ajoutez aria-hidden="true". Si elle est le seul contenu d’un bouton ou d’un lien, donnez à cet élément un aria-label tel que « Marque-page ».

Licences

Ces icônes marque-page proviennent de Lucide, Tabler, Heroicons, Phosphor, Bootstrap Icons, Iconoir, Fluent UI, Material Symbols, Material Design Icons, Carbon — des bibliothèques open source sous licences MIT, ISC ou Apache 2.0, qui autorisent l’usage personnel et commercial. Besoin d’autre chose ? Recherchez parmi plus de 70 000 icônes dans le SVG Icon Finder.

Questions fréquentes

Ces icônes marque-page sont-elles gratuites pour un usage commercial ?
Oui. Elles proviennent de bibliothèques d’icônes open source sous licences MIT, ISC ou Apache 2.0, qui autorisent l’usage commercial. Conservez la mention de licence si vous redistribuez les fichiers d’icônes eux-mêmes.
Comment changer la couleur d’une icône marque-page ?
Les SVG utilisent currentColor : définissez donc la propriété CSS color de l’élément parent — ou ouvrez l’icône dans le moteur de recherche et choisissez une couleur fixe avant de la copier.
Puis-je utiliser ces icônes dans Webflow ou React ?
Oui. Ouvrez une icône et utilisez Copy to Webflow (colle un Code Embed) ou Copy JSX pour un composant React.