@typo3/icons 4.4.3 → 5.0.0

package/.claude/settings.local.json

@@ -25,7 +25,8 @@
       "Bash(npm access:*)",
       "Bash(BROWSER=none npm publish:*)",
       "Bash(npm --version:*)",
-      "Bash(wc:*)"
+      "Bash(wc:*)",
+      "Bash(python3:*)"
     ],
     "deny": []
   }

package/.github/workflows/ci.yml

@@ -15,15 +15,15 @@ jobs:
 
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: "${{ env.NODE }}"
 
       - name: Set up cache
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}

package/.github/workflows/site.yml

@@ -30,15 +30,15 @@ jobs:
 
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: '${{ env.NODE }}'
 
       - name: Set up cache
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}
@@ -58,7 +58,7 @@ jobs:
         uses: actions/configure-pages@v5
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@v4
         with:
           path: ./_site/
 

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file.
 
+## [5.0.0] - 2026-01-15
+
+212815c9f [FEATURE] Update module icons for better theming support
+19657d7f2 [TASK] Update versions
+
+
+## [4.4.4] - 2026-01-13
+
+a56d53705 [FEATURE] Add content-bookmark icon
+fbbadb5eb [FEATURE] Add bookmark icons for add, remove and multiple
+e1f892373 [TASK] Update actions
+8512a69e7 [TASK] Update packages
+3c3c692fe [TASK] Add qrcode module icon
+a8079d89b [TASK] Extend module preview
+e68b5995f [TASK] Update versions
+
+
 ## [4.4.3] - 2025-12-05
 
 278a5f1d2 [TASK] Migrate legacy toolbar icons to actions

package/assets/scss/docs/_modulemenu.scss

@@ -0,0 +1,121 @@
+//
+// Menuview (TYPO3 Module Menu style)
+//
+.menuview {
+    display: inline-flex;
+    flex-direction: column;
+    max-width: 100%;
+    overflow-x: auto;
+}
+.menuview-item {
+    display: flex;
+    align-items: stretch;
+    gap: 8px;
+    text-decoration: none;
+
+    &:first-child {
+        .modulemenu-preview {
+            --modulemenu-padding-top: 8px;
+            --modulemenu-preview-border-top-radius: 4px;
+        }
+    }
+
+    &:last-child {
+        .modulemenu-preview {
+            --modulemenu-padding-bottom: 8px;
+            --modulemenu-preview-border-bottom-radius: 4px;
+        }
+    }
+}
+.menuview-item:hover,
+.menuview-item:focus {
+    outline: none;
+    text-decoration: none;
+}
+
+// Module menu preview container
+.modulemenu-preview {
+    --modulemenu-color: #212121;
+    --modulemenu-bg: #f8f9fa;
+    --modulemenu-padding-top: 0;
+    --modulemenu-padding-bottom: 0;
+    --modulemenu-padding-x: 8px;
+    --modulemenu-preview-border-top-radius: 0;
+    --modulemenu-preview-border-bottom-radius: 0;
+    display: grid;
+    padding: var(--modulemenu-padding-top) var(--modulemenu-padding-x) var(--modulemenu-padding-bottom) var(--modulemenu-padding-x);
+    border-radius: var(--modulemenu-preview-border-top-radius) var(--modulemenu-preview-border-top-radius) var(--modulemenu-preview-border-bottom-radius) var(--modulemenu-preview-border-bottom-radius);
+    width: 300px;
+    background-color: var(--modulemenu-bg);
+    color: var(--modulemenu-color);
+}
+
+.modulemenu-preview[data-color="light"] {
+    --modulemenu-color: #212121;
+    --modulemenu-bg: #f8f9fa;
+    --icon-color-accent: #4083e1;
+}
+
+.modulemenu-preview[data-color="dark"] {
+    --modulemenu-color: #ffffff;
+    --modulemenu-bg: #343a40;
+    --icon-color-accent: #378aff;
+}
+.modulemenu-preview[data-color="accent1"] {
+    --modulemenu-color: #ffffff;
+    --modulemenu-bg: #271f47;
+    --icon-color-accent: #8161ff;
+}
+.modulemenu-preview[data-color="accent2"] {
+    --modulemenu-color: #ffffff;
+    --modulemenu-bg: #1f4736;
+    --icon-color-accent: #4ee3a5;
+}
+.modulemenu-preview[data-color="accent3"] {
+    --modulemenu-color: #212121;
+    --modulemenu-bg: #dee2ff;
+    --icon-color-accent: #515db4;
+}
+
+// Module menu action (the clickable item)
+.modulemenu-action {
+    display: flex;
+    min-width: 42px;
+    padding: 4px;
+    align-items: center;
+    overflow: hidden;
+    border-radius: 9px;
+    text-align: start;
+    color: var(--modulemenu-color);
+    border: 1px solid transparent;
+    background-color: transparent;
+    transition: background-color .15s ease, border-color .15s ease;
+}
+.menuview-item:hover .modulemenu-action,
+.menuview-item:focus .modulemenu-action {
+    background-color: color-mix(in srgb, var(--modulemenu-bg), var(--modulemenu-color) 10%);
+    border-color: color-mix(in srgb, var(--modulemenu-bg), var(--modulemenu-color) 20%);
+}
+
+// Module menu icon
+.modulemenu-icon {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 5px;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+
+// Module menu name
+.modulemenu-name {
+    flex-grow: 1;
+    margin-inline-start: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 14px;
+}

package/assets/scss/docs.scss

@@ -1,6 +1,7 @@
 @import 'docs/variables';
 @import 'docs/sidebar';
 @import 'docs/icongrid';
+@import 'docs/modulemenu';
 @import 'docs/iconstage';
 @import 'docs/preview';
 @import 'docs/misc';

package/assets/scss/icons.scss

@@ -28,6 +28,7 @@ $icon-unify-modifier:   .86 !default;
 $icon-opacity-disabled: .5 !default;
 :root {
     --icon-color-primary: currentColor;
+    --icon-color-accent: #ff8700;
     --icon-size-small: #{$icon-size-small};
     --icon-size-medium: #{$icon-size-medium};
     --icon-size-large: #{$icon-size-large};
@@ -44,7 +45,7 @@ $icon-opacity-disabled: .5 !default;
     display: inline-flex;
     overflow: hidden;
     white-space: nowrap;
-    color: var(--icon-color-primary);
+    color: var(--icon-color-primary, currentColor);
     height: var(--icon-size, 1em);
     width: var(--icon-size, 1em);
     line-height: var(--icon-size, 1em);

package/dist/icons.css

@@ -1 +1 @@
-:root{--icon-color-primary:currentColor;--icon-size-small:16px;--icon-size-medium:32px;--icon-size-large:48px;--icon-size-mega:64px;--icon-unify-modifier:0.86;--icon-opacity-disabled:0.5}.icon{position:relative;display:inline-flex;overflow:hidden;white-space:nowrap;color:var(--icon-color-primary);height:var(--icon-size,1em);width:var(--icon-size,1em);line-height:var(--icon-size,1em);flex-shrink:0}.icon img,.icon svg{display:block;height:100%;width:100%}.icon *{display:block;line-height:inherit}.icon-markup{position:absolute;display:block;text-align:center;top:0;left:0;right:0;bottom:0}.icon-overlay{position:absolute;bottom:0;right:0;height:68.75%;width:68.75%;text-align:center}.icon-spin .icon-markup{-webkit-animation:icon-spin 2s infinite linear;animation:icon-spin 2s infinite linear}@keyframes icon-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.icon-bidi:dir(rtl) .icon-markup{transform:scaleX(-1)}.icon-state-disabled .icon-markup{opacity:var(--icon-opacity-disabled)}.icon-size-small{--icon-size:var(--icon-size-small)}.icon-size-small .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-small .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc(var(--icon-size)/ 1.6 * var(--icon-unify-modifier))}.icon-size-medium{--icon-size:var(--icon-size-medium)}.icon-size-medium .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-medium .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc(var(--icon-size)/ 1.6 * var(--icon-unify-modifier))}.icon-size-large{--icon-size:var(--icon-size-large)}.icon-size-large .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-large .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc(var(--icon-size)/ 1.6 * var(--icon-unify-modifier))}.icon-size-mega{--icon-size:var(--icon-size-mega)}.icon-size-mega .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-mega .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc(var(--icon-size)/ 1.6 * var(--icon-unify-modifier))}
+:root{--icon-color-primary:currentColor;--icon-color-accent:#ff8700;--icon-size-small:16px;--icon-size-medium:32px;--icon-size-large:48px;--icon-size-mega:64px;--icon-unify-modifier:0.86;--icon-opacity-disabled:0.5}.icon{position:relative;display:inline-flex;overflow:hidden;white-space:nowrap;color:var(--icon-color-primary,currentColor);height:var(--icon-size,1em);width:var(--icon-size,1em);line-height:var(--icon-size,1em);flex-shrink:0}.icon img,.icon svg{display:block;height:100%;width:100%}.icon *{display:block;line-height:inherit}.icon-markup{position:absolute;display:block;text-align:center;top:0;left:0;right:0;bottom:0}.icon-overlay{position:absolute;bottom:0;right:0;height:68.75%;width:68.75%;text-align:center}.icon-spin .icon-markup{-webkit-animation:icon-spin 2s infinite linear;animation:icon-spin 2s infinite linear}@keyframes icon-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.icon-bidi:dir(rtl) .icon-markup{transform:scaleX(-1)}.icon-state-disabled .icon-markup{opacity:var(--icon-opacity-disabled)}.icon-size-small{--icon-size:var(--icon-size-small)}.icon-size-small .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-small .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc(var(--icon-size)/ 1.6 * var(--icon-unify-modifier))}.icon-size-medium{--icon-size:var(--icon-size-medium)}.icon-size-medium .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-medium .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc(var(--icon-size)/ 1.6 * var(--icon-unify-modifier))}.icon-size-large{--icon-size:var(--icon-size-large)}.icon-size-large .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-large .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc(var(--icon-size)/ 1.6 * var(--icon-unify-modifier))}.icon-size-mega{--icon-size:var(--icon-size-mega)}.icon-size-mega .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-mega .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc(var(--icon-size)/ 1.6 * var(--icon-unify-modifier))}

package/dist/icons.json

@@ -301,6 +301,20 @@
       "sprite": "sprites/actions.svg#actions-book",
       "bidi": false
     },
+    "actions-bookmark-add": {
+      "identifier": "actions-bookmark-add",
+      "category": "actions",
+      "svg": "svgs/actions/actions-bookmark-add.svg",
+      "sprite": "sprites/actions.svg#actions-bookmark-add",
+      "bidi": false
+    },
+    "actions-bookmark-remove": {
+      "identifier": "actions-bookmark-remove",
+      "category": "actions",
+      "svg": "svgs/actions/actions-bookmark-remove.svg",
+      "sprite": "sprites/actions.svg#actions-bookmark-remove",
+      "bidi": false
+    },
     "actions-bookmark": {
       "identifier": "actions-bookmark",
       "category": "actions",
@@ -308,6 +322,13 @@
       "sprite": "sprites/actions.svg#actions-bookmark",
       "bidi": false
     },
+    "actions-bookmarks": {
+      "identifier": "actions-bookmarks",
+      "category": "actions",
+      "svg": "svgs/actions/actions-bookmarks.svg",
+      "sprite": "sprites/actions.svg#actions-bookmarks",
+      "bidi": false
+    },
     "actions-brand-apple": {
       "identifier": "actions-brand-apple",
       "category": "actions",
@@ -3318,6 +3339,13 @@
       "sprite": "sprites/content.svg#content-book",
       "bidi": false
     },
+    "content-bookmark": {
+      "identifier": "content-bookmark",
+      "category": "content",
+      "svg": "svgs/content/content-bookmark.svg",
+      "sprite": "sprites/content.svg#content-bookmark",
+      "bidi": false
+    },
     "content-briefcase": {
       "identifier": "content-briefcase",
       "category": "content",
@@ -4970,6 +4998,13 @@
       "sprite": "sprites/module.svg#module-dbint",
       "bidi": false
     },
+    "module-debug": {
+      "identifier": "module-debug",
+      "category": "module",
+      "svg": "svgs/module/module-debug.svg",
+      "sprite": "sprites/module.svg#module-debug",
+      "bidi": false
+    },
     "module-documentation": {
       "identifier": "module-documentation",
       "category": "module",
@@ -5068,6 +5103,13 @@
       "sprite": "sprites/module.svg#module-install",
       "bidi": false
     },
+    "module-integrations": {
+      "identifier": "module-integrations",
+      "category": "module",
+      "svg": "svgs/module/module-integrations.svg",
+      "sprite": "sprites/module.svg#module-integrations",
+      "bidi": false
+    },
     "module-lang": {
       "identifier": "module-lang",
       "category": "module",
@@ -5103,6 +5145,13 @@
       "sprite": "sprites/module.svg#module-permission",
       "bidi": false
     },
+    "module-qrcode": {
+      "identifier": "module-qrcode",
+      "category": "module",
+      "svg": "svgs/module/module-qrcode.svg",
+      "sprite": "sprites/module.svg#module-qrcode",
+      "bidi": false
+    },
     "module-reactions": {
       "identifier": "module-reactions",
       "category": "module",
@@ -5201,6 +5250,13 @@
       "sprite": "sprites/module.svg#module-tsconfig",
       "bidi": false
     },
+    "module-upgrade": {
+      "identifier": "module-upgrade",
+      "category": "module",
+      "svg": "svgs/module/module-upgrade.svg",
+      "sprite": "sprites/module.svg#module-upgrade",
+      "bidi": false
+    },
     "module-urls": {
       "identifier": "module-urls",
       "category": "module",
@@ -5208,13 +5264,6 @@
       "sprite": "sprites/module.svg#module-urls",
       "bidi": false
     },
-    "module-version": {
-      "identifier": "module-version",
-      "category": "module",
-      "svg": "svgs/module/module-version.svg",
-      "sprite": "sprites/module.svg#module-version",
-      "bidi": false
-    },
     "module-viewpage": {
       "identifier": "module-viewpage",
       "category": "module",
@@ -5707,6 +5756,7 @@
     "information-application-context": "actions-window-cog",
     "apps-toolbar-menu-workspace": "actions-workspace",
     "empty-empty": "miscellaneous-placeholder",
+    "module-version": "module-generic",
     "module-templates": "module-template",
     "module-tstemplate": "module-tsconfig",
     "spinner-circle-light": "spinner-circle",

package/dist/icons.scss

@@ -28,6 +28,7 @@ $icon-unify-modifier:   .86 !default;
 $icon-opacity-disabled: .5 !default;
 :root {
     --icon-color-primary: currentColor;
+    --icon-color-accent: #ff8700;
     --icon-size-small: #{$icon-size-small};
     --icon-size-medium: #{$icon-size-medium};
     --icon-size-large: #{$icon-size-large};
@@ -44,7 +45,7 @@ $icon-opacity-disabled: .5 !default;
     display: inline-flex;
     overflow: hidden;
     white-space: nowrap;
-    color: var(--icon-color-primary);
+    color: var(--icon-color-primary, currentColor);
     height: var(--icon-size, 1em);
     width: var(--icon-size, 1em);
     line-height: var(--icon-size, 1em);

package/dist/scss/icons-variables-actions.scss

@@ -42,6 +42,9 @@ $icon-actions-bolt: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000
 $icon-actions-bolt-alt: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='m5.738 14.5 2-5H2.935l6.234-7.905a.247.247 0 0 1 .196-.095h.898l-2 5h4.803l-6.232 7.905a.25.25 0 0 1-.197.095h-.898Z'/%3e%3cpath d='M9.523 2 8.071 5.629 7.523 7h4.51l-5.518 7h-.038l1.451-3.629L8.477 9h-4.51l5.518-7h.038m.738-1h-.897a.75.75 0 0 0-.59.286L2.519 9.223a.5.5 0 0 0 .416.777H7l-1.726 4.314A.5.5 0 0 0 5.74 15h.897a.75.75 0 0 0 .59-.286l6.256-7.937A.5.5 0 0 0 13.066 6H9l1.726-4.314A.5.5 0 0 0 10.26 1Z'/%3e%3c/g%3e%3c/svg%3e") !default;
 $icon-actions-book: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M12 1H3v14h9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm0 12v1H4V2h8v9h-1v2h1z'/%3e%3cpath d='M11 3.25a.25.25 0 0 0-.25-.25h-5.5a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h5.5a.25.25 0 0 0 .25-.25v-2.5zM5 12h2v1H5z'/%3e%3c/g%3e%3c/svg%3e") !default;
 $icon-actions-bookmark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M11 2c.551 0 1 .449 1 1v10.344l-3.199-2.02a1.498 1.498 0 0 0-1.602 0L4 13.343V3c0-.551.449-1 1-1h6m0-1H5a2 2 0 0 0-2 2v11.261a.5.5 0 0 0 .686.465l4.047-2.557a.5.5 0 0 1 .534 0l4.047 2.557A.5.5 0 0 0 13 14.26V3a2 2 0 0 0-2-2Z'/%3e%3c/g%3e%3c/svg%3e") !default;
+$icon-actions-bookmark-add: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M12 6v7.344l-3.199-2.02a1.498 1.498 0 0 0-1.602 0L4 13.343V3c0-.551.449-1 1-1h4V1H5a2 2 0 0 0-2 2v11.261a.5.5 0 0 0 .686.465l4.047-2.557a.5.5 0 0 1 .534 0l4.047 2.557A.5.5 0 0 0 13 14.26V6h-1Z'/%3e%3cpath d='M10 2h5v1h-5z'/%3e%3cpath d='M12 0h1v5h-1z'/%3e%3c/g%3e%3c/svg%3e") !default;
+$icon-actions-bookmark-remove: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M12 6v7.344l-3.199-2.02a1.498 1.498 0 0 0-1.602 0L4 13.343V3c0-.551.449-1 1-1h4V1H5a2 2 0 0 0-2 2v11.261a.5.5 0 0 0 .686.465l4.047-2.557a.5.5 0 0 1 .534 0l4.047 2.557A.5.5 0 0 0 13 14.26V6h-1Z'/%3e%3cpath d='M10 2h5v1h-5z'/%3e%3c/g%3e%3c/svg%3e") !default;
+$icon-actions-bookmarks: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M9 4c.551 0 1 .449 1 1v8.382l-2.33-1.165a1.508 1.508 0 0 0-1.34 0L4 13.382V5c0-.551.449-1 1-1h4m0-1H5a2 2 0 0 0-2 2v9.191a.5.5 0 0 0 .724.447l3.052-1.526a.5.5 0 0 1 .448 0l3.052 1.526a.497.497 0 0 0 .724-.447v-9.19a2 2 0 0 0-2-2Z'/%3e%3cpath d='M11 1H7c-.738 0-1.376.405-1.722 1H11c.552 0 1 .449 1 1v9.723c.595-.347 1-.985 1-1.723V3a2 2 0 0 0-2-2Z'/%3e%3c/g%3e%3c/svg%3e") !default;
 $icon-actions-brand-apple: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M8.1 5c-.6 0-1.4-.6-2.3-.6-1.2 0-2.3.7-2.9 1.8-1.2 2.1-.3 5.3.9 7.1.6.8 1.3 1.7 2.2 1.7.9 0 1.2-.6 2.3-.6 1.1 0 1.4.6 2.3.6 1 0 1.6-.9 2.1-1.7.7-1 1-1.9 1-2 0 0-1.9-.7-1.9-2.8 0-1.8 1.4-2.6 1.5-2.7-.8-1.2-2.1-1.4-2.6-1.4-1.1-.1-2.1.6-2.6.6zm2-1.8c.5-.6.8-1.4.7-2.2-.7 0-1.6.5-2.1 1.1-.4.5-.8 1.3-.7 2.1.8.1 1.6-.4 2.1-1'/%3e%3c/g%3e%3c/svg%3e") !default;
 $icon-actions-brand-bluesky: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M4.034 2.67C5.64 3.874 7.367 6.316 8 7.628c.633-1.309 2.36-3.751 3.966-4.956C13.124 1.8 15 1.13 15 3.27c0 .426-.245 3.589-.388 4.103-.5 1.782-2.321 2.239-3.941 1.961 2.83.482 3.55 2.077 1.994 3.672-2.954 3.031-4.244-.759-4.574-1.73-.047-.135-.072-.214-.091-.214s-.044.082-.09.214c-.33.971-1.624 4.761-4.575 1.73-1.554-1.595-.836-3.19 1.994-3.672-1.62.278-3.44-.179-3.938-1.964C1.245 6.857 1 3.694 1 3.268c0-2.14 1.876-1.47 3.034-.6v.003Z'/%3e%3c/g%3e%3c/svg%3e") !default;
 $icon-actions-brand-discord: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='currentColor'%3e%3cpath d='M12.86 3.583c-.92-.42-1.892-.72-2.889-.888-.136.244-.26.495-.37.752a10.756 10.756 0 0 0-3.205 0 7.969 7.969 0 0 0-.37-.752c-.998.17-1.97.47-2.89.89C1.306 6.29.811 8.928 1.058 11.528c1.07.79 2.27 1.392 3.543 1.778.287-.385.54-.795.759-1.223a7.534 7.534 0 0 1-1.195-.57c.1-.073.198-.148.293-.22a8.321 8.321 0 0 0 7.082 0c.096.078.194.152.293.22a7.563 7.563 0 0 1-1.197.571c.218.428.472.837.759 1.222a11.59 11.59 0 0 0 3.544-1.777c.291-3.015-.496-5.628-2.08-7.945zM5.673 9.928c-.69 0-1.26-.626-1.26-1.397s.55-1.403 1.258-1.403 1.274.632 1.262 1.403-.556 1.397-1.26 1.397zm4.652 0c-.692 0-1.26-.626-1.26-1.397s.55-1.403 1.26-1.403c.709 0 1.27.632 1.258 1.403-.012.77-.555 1.397-1.258 1.397z'/%3e%3c/g%3e%3c/svg%3e") !default;

package/dist/scss/icons-variables-content.scss

@@ -11,6 +11,7 @@ $icon-content-beside-text-img-centered-right: url("data:image/svg+xml,%3csvg xml
 $icon-content-beside-text-img-left: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23FFF' d='M1 1h14v14H1z'/%3e%3cpath fill='%23999' d='M14 2v12H2V2h12m1-1H1v14h14V1z'/%3e%3cg%3e%3cpath fill='%2359F' d='M3 3h6v6H3V3z'/%3e%3cpath fill='%23FFF' d='M7 8H4l.75-1 .75-1 .75 1L7 8z'/%3e%3cpath fill='%23FFF' d='M8 8H5.333L6 7.333l.667-.666.666.666L8 8z'/%3e%3ccircle cx='7.5' cy='5.5' r='.5' fill='%23FFF'/%3e%3c/g%3e%3cg%3e%3cpath fill='%23B9B9B9' d='M10 5h3v1h-3zM10 7h3v1h-3zM10 9h3v1h-3zM10 11h3v1h-3z'/%3e%3cpath fill='%23666' d='M10 3h3v1h-3z'/%3e%3c/g%3e%3c/svg%3e") !default;
 $icon-content-beside-text-img-right: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23FFF' d='M1 1h14v14H1z'/%3e%3cpath fill='%23999' d='M14 2v12H2V2h12m1-1H1v14h14V1z'/%3e%3cg%3e%3cpath fill='%2359F' d='M7 3h6v6H7V3z'/%3e%3cpath fill='%23FFF' d='M11 8H8l.75-1 .75-1 .75 1L11 8z'/%3e%3cpath fill='%23FFF' d='M12 8H9.333L10 7.333l.667-.666.666.666L12 8z'/%3e%3ccircle cx='11.5' cy='5.5' r='.5' fill='%23FFF'/%3e%3c/g%3e%3cg%3e%3cpath fill='%23B9B9B9' d='M3 5h3v1H3zM3 7h3v1H3zM3 9h3v1H3zM3 11h3v1H3z'/%3e%3cpath fill='%23666' d='M3 3h3v1H3z'/%3e%3c/g%3e%3c/svg%3e") !default;
 $icon-content-book: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%239F6358' d='M3 1h9a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3V1z'/%3e%3cpath fill='%236F453D' d='M12 2v12H4V2h8m0-1H3v14h9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'/%3e%3cpath fill='%23BC928A' d='M10.75 6h-5.5A.25.25 0 0 1 5 5.75v-2.5A.25.25 0 0 1 5.25 3h5.5a.25.25 0 0 1 .25.25v2.5a.25.25 0 0 1-.25.25z'/%3e%3cpath fill='%2353342E' d='M3 1h1v14H3z'/%3e%3cpath fill='%23402823' d='M11 11h2v2h-2z'/%3e%3cpath fill='%23BC928A' d='M5 12h2v1H5z'/%3e%3c/svg%3e") !default;
+$icon-content-bookmark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23c83c3c' d='M11 1H5a2 2 0 0 0-2 2v11.261a.5.5 0 0 0 .686.465l4.047-2.557a.5.5 0 0 1 .534 0l4.047 2.557A.5.5 0 0 0 13 14.26V3a2 2 0 0 0-2-2Z'/%3e%3cpath d='M11 2c.551 0 1 .449 1 1v10.344l-3.199-2.02a1.498 1.498 0 0 0-1.602 0L4 13.343V3c0-.551.449-1 1-1h6m0-1H5a2 2 0 0 0-2 2v11.261a.5.5 0 0 0 .686.465l4.047-2.557a.5.5 0 0 1 .534 0l4.047 2.557A.5.5 0 0 0 13 14.26V3a2 2 0 0 0-2-2Z' opacity='.2'/%3e%3c/svg%3e") !default;
 $icon-content-briefcase: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23666' d='M10 3c.6 0 1 .4 1 1v1H5V4c0-.6.4-1 1-1h4m0-1H6c-1.1 0-2 .9-2 2v1c0 .6.4 1 1 1h6c.6 0 1-.4 1-1V4c0-1.1-.9-2-2-2z'/%3e%3cpath fill='%239F6358' d='M1 4h14v10H1z'/%3e%3cpath fill='%236F453D' d='M14 5v8H2V5h12m1-1H1v10h14V4z'/%3e%3cpath fill='%23BC928A' d='M11 9H5L1 4h14z'/%3e%3cpath fill='%236F453D' d='m12.9 5-2.4 3h-5L3.1 5h9.8M15 4H1l4 5h6l4-5z'/%3e%3cpath fill='%23402823' d='M6 8h1v2H6zM9 8h1v2H9z'/%3e%3c/svg%3e") !default;
 $icon-content-building: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg%3e%3cpath fill='%23EFEFEF' d='M14 15H2V1.2c0-.1.1-.2.2-.2h11.5c.2 0 .3.1.3.2V15z'/%3e%3cpath fill='%23999' d='M13 2v12H3V2h10m.8-1H2.2c-.1 0-.2.1-.2.2V15h12V1.2c0-.1-.1-.2-.2-.2z'/%3e%3cpath fill='%23515151' d='M1 14h14v1H1z'/%3e%3cpath fill='%238C8C8C' d='M7 12h2v2H7z'/%3e%3cpath fill='%23313131' d='M4 3h2v1H4zM10 3h2v1h-2zM10 5h2v1h-2zM4 5h2v1H4zM4 7h2v1H4zM7 3h2v1H7zM7 5h2v1H7zM7 7h2v1H7zM10 7h2v1h-2zM4 9h2v1H4zM7 9h2v1H7zM10 9h2v1h-2z'/%3e%3c/g%3e%3c/svg%3e") !default;
 $icon-content-bullets: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23FFF' d='M1 1h14v14H1V1z'/%3e%3cpath fill='%23999' d='M1 1v14h14V1H1zm1 1h12v12H2V2z'/%3e%3cpath fill='%23666' d='M3 3h10v2H3V3z'/%3e%3cpath fill='%23FF8700' d='M3 6h1v1H3V6zm0 2h1v1H3V8zm0 2h1v1H3v-1zm0 2h1v1H3v-1z'/%3e%3cpath fill='%23B9B9B9' d='M5 6h8v1H5V6zm0 2h8v1H5V8zm0 2h8v1H5v-1zm0 2h8v1H5v-1z'/%3e%3c/svg%3e") !default;