feat(icons): add Phase 1 core toolbar icons in Catppuccin Mocha
Some checks failed
Build and Test / build (push) Has been cancelled

Complete the core toolbar icon set with 15 additional icons:

File Operations:
- document-save-as.svg - Save As with pencil indicator
- Std_SaveAll.svg - Save All with stacked disks
- Std_Import.svg - Import with arrow into document
- Std_Export.svg - Export with arrow out of document
- document-print.svg - Printer with paper

Edit Operations:
- edit-select-all.svg - Selection rectangle with corner handles

View Operations:
- zoom-fit-best.svg - Fit to view with corner arrows
- Std_ViewHome.svg - Home view with house icon
- view-fullscreen.svg - Fullscreen expand arrows
- Std_ViewScreenShot.svg - Camera for screenshots
- Std_ToggleVisibility.svg - Eye icon for visibility
- Std_Refresh.svg - Circular refresh arrow

Common Actions:
- help-browser.svg - Question mark in circle
- application-exit.svg - Door with exit arrow
- Std_DuplicateSelection.svg - Duplicate objects

All icons follow the Catppuccin Mocha design system with:
- 32x32 viewBox
- Rounded rectangle background (surface0 #313244)
- Consistent stroke widths and color usage

Ref #4
This commit is contained in:
2026-02-05 11:23:47 -06:00
parent 224feda4ad
commit c28d6f92cf
15 changed files with 181 additions and 0 deletions

View File

@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Original object -->
<rect x="6" y="6" width="12" height="12" rx="2" fill="#45475a" stroke="#6c7086" stroke-width="1.5"/>
<!-- Duplicate object -->
<rect x="14" y="14" width="12" height="12" rx="2" fill="#45475a" stroke="#94e2d5" stroke-width="1.5"/>
<!-- Plus badge -->
<circle cx="24" cy="8" r="5" fill="#a6e3a1"/>
<path d="M24 5.5 L24 10.5 M21.5 8 L26.5 8" stroke="#1e1e2e" stroke-width="1.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 574 B

View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Document -->
<path d="M8 5 L8 27 L24 27 L24 11 L18 5 Z" fill="#45475a" stroke="#89b4fa" stroke-width="1.5"/>
<path d="M18 5 L18 11 L24 11" fill="#313244" stroke="#89b4fa" stroke-width="1.5" stroke-linejoin="round"/>
<!-- Arrow pointing out of document -->
<path d="M12 16 L4 16" stroke="#fab387" stroke-width="2.5" stroke-linecap="round"/>
<path d="M7 13 L4 16 L7 19" stroke="#fab387" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>

After

Width:  |  Height:  |  Size: 617 B

View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Document -->
<path d="M8 5 L8 27 L24 27 L24 11 L18 5 Z" fill="#45475a" stroke="#89b4fa" stroke-width="1.5"/>
<path d="M18 5 L18 11 L24 11" fill="#313244" stroke="#89b4fa" stroke-width="1.5" stroke-linejoin="round"/>
<!-- Arrow pointing into document -->
<path d="M4 16 L12 16" stroke="#a6e3a1" stroke-width="2.5" stroke-linecap="round"/>
<path d="M9 13 L12 16 L9 19" stroke="#a6e3a1" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>

After

Width:  |  Height:  |  Size: 616 B

View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Circular arrow -->
<path d="M16 6 A10 10 0 1 1 6 16" fill="none" stroke="#a6e3a1" stroke-width="2.5" stroke-linecap="round"/>
<!-- Arrow head -->
<path d="M16 6 L13 10 L19 10 Z" fill="#a6e3a1"/>
</svg>

After

Width:  |  Height:  |  Size: 343 B

View File

@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Back floppy -->
<path d="M11 4 L11 20 L25 20 L25 8 L21 4 Z" fill="#45475a" stroke="#6c7086" stroke-width="1"/>
<!-- Front floppy -->
<path d="M5 8 L5 28 L19 28 L19 12 L15 8 Z" fill="#45475a" stroke="#89b4fa" stroke-width="1.5"/>
<!-- Metal slider on front -->
<rect x="8" y="8" width="6" height="5" rx="1" fill="#1e1e2e" stroke="#6c7086" stroke-width="0.75"/>
<!-- Label area on front -->
<rect x="7" y="16" width="10" height="5" rx="1" fill="#cdd6f4"/>
<!-- Multiple indicator -->
<circle cx="24" cy="24" r="5" fill="#a6e3a1"/>
<text x="24" y="27" font-family="sans-serif" font-size="8" font-weight="bold" fill="#1e1e2e" text-anchor="middle">2</text>
</svg>

After

Width:  |  Height:  |  Size: 814 B

View File

@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Eye shape -->
<path d="M4 16 Q16 6 28 16 Q16 26 4 16" fill="#45475a" stroke="#a6e3a1" stroke-width="1.5"/>
<!-- Iris -->
<circle cx="16" cy="16" r="5" fill="#89b4fa"/>
<!-- Pupil -->
<circle cx="16" cy="16" r="2.5" fill="#1e1e2e"/>
<!-- Light reflection -->
<circle cx="14" cy="14.5" r="1" fill="#cdd6f4"/>
</svg>

After

Width:  |  Height:  |  Size: 463 B

View File

@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- House shape -->
<path d="M16 6 L6 14 L6 26 L26 26 L26 14 Z" fill="#45475a" stroke="#cba6f7" stroke-width="1.5" stroke-linejoin="round"/>
<!-- Roof -->
<path d="M16 6 L4 16 L6 16 L16 8 L26 16 L28 16 Z" fill="#585b70" stroke="#cba6f7" stroke-width="1.5" stroke-linejoin="round"/>
<!-- Door -->
<rect x="13" y="18" width="6" height="8" rx="1" fill="#1e1e2e" stroke="#b4befe" stroke-width="1"/>
<!-- Window -->
<rect x="19" y="14" width="4" height="4" rx="0.5" fill="#89dceb" stroke="#74c7ec" stroke-width="0.75"/>
</svg>

After

Width:  |  Height:  |  Size: 667 B

View File

@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Camera body -->
<rect x="5" y="10" width="22" height="14" rx="2" fill="#45475a" stroke="#89b4fa" stroke-width="1.5"/>
<!-- Lens -->
<circle cx="16" cy="17" r="5" fill="#1e1e2e" stroke="#74c7ec" stroke-width="1.5"/>
<circle cx="16" cy="17" r="3" fill="#45475a"/>
<circle cx="16" cy="17" r="1.5" fill="#89dceb"/>
<!-- Flash -->
<rect x="20" y="12" width="4" height="2" rx="0.5" fill="#f9e2af"/>
<!-- Viewfinder bump -->
<rect x="12" y="7" width="8" height="4" rx="1" fill="#585b70" stroke="#89b4fa" stroke-width="1"/>
</svg>

After

Width:  |  Height:  |  Size: 676 B

View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Door frame -->
<path d="M8 6 L8 26 L20 26 L20 6 Z" fill="#45475a" stroke="#6c7086" stroke-width="1.5"/>
<!-- Open door -->
<path d="M8 6 L14 8 L14 24 L8 26 Z" fill="#585b70" stroke="#6c7086" stroke-width="1"/>
<!-- Arrow exiting -->
<path d="M18 16 L28 16" stroke="#f38ba8" stroke-width="2.5" stroke-linecap="round"/>
<path d="M24 12 L28 16 L24 20" stroke="#f38ba8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<!-- Door handle -->
<circle cx="12" cy="16" r="1" fill="#cdd6f4"/>
</svg>

After

Width:  |  Height:  |  Size: 672 B

View File

@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Printer body -->
<rect x="5" y="12" width="22" height="10" rx="2" fill="#45475a" stroke="#89b4fa" stroke-width="1.5"/>
<!-- Paper input (top) -->
<rect x="9" y="6" width="14" height="8" rx="1" fill="#cdd6f4" stroke="#6c7086" stroke-width="1"/>
<!-- Paper output (bottom) -->
<rect x="9" y="20" width="14" height="8" rx="1" fill="#cdd6f4" stroke="#6c7086" stroke-width="1"/>
<!-- Paper lines -->
<line x1="11" y1="23" x2="21" y2="23" stroke="#585b70" stroke-width="1" stroke-linecap="round"/>
<line x1="11" y1="25" x2="18" y2="25" stroke="#585b70" stroke-width="1" stroke-linecap="round"/>
<!-- Printer status light -->
<circle cx="23" cy="15" r="1.5" fill="#a6e3a1"/>
</svg>

After

Width:  |  Height:  |  Size: 830 B

View File

@@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Floppy disk body -->
<path d="M7 6 L7 26 L25 26 L25 10 L21 6 Z" fill="#45475a" stroke="#89b4fa" stroke-width="1.5"/>
<!-- Metal slider -->
<rect x="10" y="6" width="10" height="8" rx="1" fill="#1e1e2e" stroke="#6c7086" stroke-width="1"/>
<!-- Slider notch -->
<rect x="17" y="7" width="2" height="6" fill="#313244"/>
<!-- Label area -->
<rect x="9" y="17" width="14" height="7" rx="1" fill="#cdd6f4"/>
<!-- Pencil icon for "save as" -->
<g transform="translate(18, 14)">
<path d="M6 2 L8 0 L10 2 L4 8 L2 8 L2 6 Z" fill="#f9e2af" stroke="#fab387" stroke-width="0.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 738 B

View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Selection rectangle with dashed border -->
<rect x="6" y="6" width="20" height="20" rx="2" fill="#94e2d5" fill-opacity="0.2" stroke="#94e2d5" stroke-width="2" stroke-dasharray="4,2"/>
<!-- Corner handles -->
<rect x="4" y="4" width="4" height="4" rx="1" fill="#a6e3a1"/>
<rect x="24" y="4" width="4" height="4" rx="1" fill="#a6e3a1"/>
<rect x="4" y="24" width="4" height="4" rx="1" fill="#a6e3a1"/>
<rect x="24" y="24" width="4" height="4" rx="1" fill="#a6e3a1"/>
<!-- Center checkmark -->
<path d="M12 16 L15 19 L21 12" stroke="#cdd6f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>

After

Width:  |  Height:  |  Size: 774 B

View File

@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Circle background -->
<circle cx="16" cy="16" r="10" fill="#45475a" stroke="#89b4fa" stroke-width="2"/>
<!-- Question mark -->
<path d="M13 12 C13 9 15 8 17 8 C19 8 21 9.5 21 12 C21 14 19 14.5 17 15.5 L17 18"
stroke="#cdd6f4" stroke-width="2.5" stroke-linecap="round" fill="none"/>
<!-- Dot -->
<circle cx="17" cy="22" r="1.5" fill="#cdd6f4"/>
</svg>

After

Width:  |  Height:  |  Size: 504 B

View File

@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Expand arrows in corners -->
<!-- Top-left -->
<path d="M6 12 L6 6 L12 6" stroke="#cba6f7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<!-- Top-right -->
<path d="M20 6 L26 6 L26 12" stroke="#cba6f7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<!-- Bottom-left -->
<path d="M6 20 L6 26 L12 26" stroke="#cba6f7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<!-- Bottom-right -->
<path d="M26 20 L26 26 L20 26" stroke="#cba6f7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<!-- Center rectangle representing content -->
<rect x="10" y="10" width="12" height="12" rx="1" fill="#45475a" stroke="#b4befe" stroke-width="1"/>
</svg>

After

Width:  |  Height:  |  Size: 923 B

View File

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Frame/viewport -->
<rect x="6" y="6" width="20" height="20" rx="2" fill="none" stroke="#cba6f7" stroke-width="2"/>
<!-- Corner arrows pointing inward -->
<!-- Top-left -->
<path d="M6 10 L6 6 L10 6" stroke="#b4befe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M9 9 L6 6" stroke="#b4befe" stroke-width="2" stroke-linecap="round"/>
<!-- Top-right -->
<path d="M22 6 L26 6 L26 10" stroke="#b4befe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M23 9 L26 6" stroke="#b4befe" stroke-width="2" stroke-linecap="round"/>
<!-- Bottom-left -->
<path d="M6 22 L6 26 L10 26" stroke="#b4befe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M9 23 L6 26" stroke="#b4befe" stroke-width="2" stroke-linecap="round"/>
<!-- Bottom-right -->
<path d="M26 22 L26 26 L22 26" stroke="#b4befe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M23 23 L26 26" stroke="#b4befe" stroke-width="2" stroke-linecap="round"/>
<!-- Center object -->
<rect x="12" y="12" width="8" height="8" rx="1" fill="#cba6f7" fill-opacity="0.5"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB