kindred/create
1
1
Fork 0
Code Issues 53 Pull Requests Actions Packages Projects 9 Releases 2 Wiki Activity

refactor(icons): update color scheme for View and System icons
Some checks are pending
Build and Test / build (push) Has started running
Details

Browse Source 
Change color assignments for better semantic meaning:
- View operations: Yellow (#f9e2af) / Peach (#fab387)
- System/Settings: Mauve (#cba6f7) / Lavender (#b4befe)

Updated icons:
- View: zoom-in, zoom-out, zoom-fit-best, view-refresh, view-fullscreen,
        Std_ViewHome, Std_ViewScreenShot, Std_ToggleVisibility
- System: preferences-system, help-browser, application-exit, Std_Refresh

Also updated README.md color usage documentation.
This commit is contained in:
forbes-0023
2026-02-05 11:28:44 -06:00
parent c28d6f92cf
commit 69414c5dc5
13 changed files with 47 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
kindred-icons/README.md
View File

@@ -51,12 +51,13 @@ All Kindred Create icons follow these guidelines:
| Sapphire | `#74c7ec` | Links, info |
| Sky | `#89dceb` | Light blue accent |
| Teal | `#94e2d5` | Success secondary |
| Green | `#a6e3a1` | **Creation/Success** |
| Yellow | `#f9e2af` | **Sketcher, warnings** |
| Peach | `#fab387` | **Settings, caution** |
| Green | `#a6e3a1` | **Edit operations, Creation/Success** |
| Yellow | `#f9e2af` | **View operations** |
| Peach | `#fab387` | **View accents** |
| Maroon | `#eba0ac` | Soft red |
| Red | `#f38ba8` | **Deletion/Error** |
| Mauve | `#cba6f7` | **Primary accent** |
| Mauve | `#cba6f7` | **System/Settings** |
| Lavender | `#b4befe` | **System accents** |
| Pink | `#f5c2e7` | Decorative |
| Flamingo | `#f2cdcd` | Soft accents |
| Rosewater | `#f5e0dc` | Lightest accent |

4
kindred-icons/Std_Refresh.svg
View File

@@ -1,7 +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"/>
<path d="M16 6 A10 10 0 1 1 6 16" fill="none" stroke="#cba6f7" stroke-width="2.5" stroke-linecap="round"/>
<!-- Arrow head -->
<path d="M16 6 L13 10 L19 10 Z" fill="#a6e3a1"/>
<path d="M16 6 L13 10 L19 10 Z" fill="#b4befe"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 343 B

After

Width:  |  Height:  |  Size: 343 B

4
kindred-icons/Std_ToggleVisibility.svg
View File

@@ -1,9 +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"/>
<!-- Eye shape -->
<path d="M4 16 Q16 6 28 16 Q16 26 4 16" fill="#45475a" stroke="#a6e3a1" stroke-width="1.5"/>
<path d="M4 16 Q16 6 28 16 Q16 26 4 16" fill="#45475a" stroke="#f9e2af" stroke-width="1.5"/>
<!-- Iris -->
<circle cx="16" cy="16" r="5" fill="#89b4fa"/>
<circle cx="16" cy="16" r="5" fill="#fab387"/>
<!-- Pupil -->
<circle cx="16" cy="16" r="2.5" fill="#1e1e2e"/>
<!-- Light reflection -->
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 463 B

After

Width:  |  Height:  |  Size: 463 B

6
kindred-icons/Std_ViewHome.svg
View File

@@ -1,11 +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"/>
<path d="M16 6 L6 14 L6 26 L26 26 L26 14 Z" fill="#45475a" stroke="#f9e2af" 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"/>
<path d="M16 6 L4 16 L6 16 L16 8 L26 16 L28 16 Z" fill="#585b70" stroke="#f9e2af" 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"/>
<rect x="13" y="18" width="6" height="8" rx="1" fill="#1e1e2e" stroke="#fab387" 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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 667 B

After

Width:  |  Height:  |  Size: 667 B

10
kindred-icons/Std_ViewScreenShot.svg
View File

@@ -1,13 +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"/>
<rect x="5" y="10" width="22" height="14" rx="2" fill="#45475a" stroke="#f9e2af" 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="5" fill="#1e1e2e" stroke="#fab387" stroke-width="1.5"/>
<circle cx="16" cy="17" r="3" fill="#45475a"/>
<circle cx="16" cy="17" r="1.5" fill="#89dceb"/>
<circle cx="16" cy="17" r="1.5" fill="#f9e2af"/>
<!-- Flash -->
<rect x="20" y="12" width="4" height="2" rx="0.5" fill="#f9e2af"/>
<rect x="20" y="12" width="4" height="2" rx="0.5" fill="#cdd6f4"/>
<!-- Viewfinder bump -->
<rect x="12" y="7" width="8" height="4" rx="1" fill="#585b70" stroke="#89b4fa" stroke-width="1"/>
<rect x="12" y="7" width="8" height="4" rx="1" fill="#585b70" stroke="#f9e2af" stroke-width="1"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 676 B

After

Width:  |  Height:  |  Size: 676 B

4
kindred-icons/application-exit.svg
View File

@@ -1,9 +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"/>
<!-- Door frame -->
<path d="M8 6 L8 26 L20 26 L20 6 Z" fill="#45475a" stroke="#6c7086" stroke-width="1.5"/>
<path d="M8 6 L8 26 L20 26 L20 6 Z" fill="#45475a" stroke="#cba6f7" stroke-width="1.5"/>
<!-- Open door -->
<path d="M8 6 L14 8 L14 24 L8 26 Z" fill="#585b70" stroke="#6c7086" stroke-width="1"/>
<path d="M8 6 L14 8 L14 24 L8 26 Z" fill="#585b70" stroke="#b4befe" 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"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 672 B

After

Width:  |  Height:  |  Size: 672 B

6
kindred-icons/help-browser.svg
View File

@@ -1,10 +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"/>
<circle cx="16" cy="16" r="10" fill="#45475a" stroke="#cba6f7" 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"/>
stroke="#b4befe" stroke-width="2.5" stroke-linecap="round" fill="none"/>
<!-- Dot -->
<circle cx="17" cy="22" r="1.5" fill="#cdd6f4"/>
<circle cx="17" cy="22" r="1.5" fill="#b4befe"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 504 B

After

Width:  |  Height:  |  Size: 504 B

6
kindred-icons/preferences-system.svg
View File

@@ -2,9 +2,9 @@
<rect x="2" y="2" width="28" height="28" rx="4" fill="#313244"/>
<!-- Gear outer -->
<path d="M16 6 L18 6 L19 8 L21 9 L23 8 L24.5 9.5 L23.5 11.5 L24.5 13.5 L26.5 14 L26.5 16 L26 18 L24 19 L25 21 L23.5 22.5 L21.5 21.5 L19.5 22.5 L19 24.5 L17 25 L15 24.5 L14 22.5 L12 21.5 L10 22.5 L8.5 21 L9.5 19 L8 17 L6 16.5 L6 14.5 L8 14 L9 12 L8 10 L9.5 8.5 L11.5 9.5 L13.5 8.5 L14 6.5 Z"
fill="#45475a" stroke="#fab387" stroke-width="1.5" stroke-linejoin="round"/>
fill="#45475a" stroke="#cba6f7" stroke-width="1.5" stroke-linejoin="round"/>
<!-- Gear center -->
<circle cx="16" cy="16" r="4" fill="#313244" stroke="#fab387" stroke-width="1.5"/>
<circle cx="16" cy="16" r="4" fill="#313244" stroke="#cba6f7" stroke-width="1.5"/>
<!-- Center dot -->
<circle cx="16" cy="16" r="1.5" fill="#fab387"/>
<circle cx="16" cy="16" r="1.5" fill="#b4befe"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 716 B

After

Width:  |  Height:  |  Size: 716 B

10
kindred-icons/view-fullscreen.svg
View File

@@ -2,13 +2,13 @@
<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"/>
<path d="M6 12 L6 6 L12 6" stroke="#f9e2af" 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"/>
<path d="M20 6 L26 6 L26 12" stroke="#f9e2af" 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"/>
<path d="M6 20 L6 26 L12 26" stroke="#f9e2af" 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"/>
<path d="M26 20 L26 26 L20 26" stroke="#f9e2af" 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"/>
<rect x="10" y="10" width="12" height="12" rx="1" fill="#45475a" stroke="#fab387" stroke-width="1"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 923 B

After

Width:  |  Height:  |  Size: 923 B

6
kindred-icons/view-refresh.svg
View File

@@ -1,9 +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"/>
<!-- Circular arrow -->
<path d="M16 6 A10 10 0 1 1 6 16" fill="none" stroke="#cba6f7" stroke-width="2.5" stroke-linecap="round"/>
<path d="M16 6 A10 10 0 1 1 6 16" fill="none" stroke="#f9e2af" stroke-width="2.5" stroke-linecap="round"/>
<!-- Arrow head -->
<path d="M16 6 L12 9 L16 12" fill="none" stroke="#cba6f7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 6 L12 9 L16 12" fill="none" stroke="#f9e2af" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Center indicator -->
<circle cx="16" cy="16" r="3" fill="#b4befe"/>
<circle cx="16" cy="16" r="3" fill="#fab387"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 497 B

After

Width:  |  Height:  |  Size: 497 B

20
kindred-icons/zoom-fit-best.svg
View File

@@ -1,20 +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"/>
<rect x="6" y="6" width="20" height="20" rx="2" fill="none" stroke="#f9e2af" 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"/>
<path d="M6 10 L6 6 L10 6" stroke="#fab387" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M9 9 L6 6" stroke="#fab387" 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"/>
<path d="M22 6 L26 6 L26 10" stroke="#fab387" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M23 9 L26 6" stroke="#fab387" 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"/>
<path d="M6 22 L6 26 L10 26" stroke="#fab387" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M9 23 L6 26" stroke="#fab387" 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"/>
<path d="M26 22 L26 26 L22 26" stroke="#fab387" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M23 23 L26 26" stroke="#fab387" 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"/>
<rect x="12" y="12" width="8" height="8" rx="1" fill="#f9e2af" fill-opacity="0.5"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

4
kindred-icons/zoom-in.svg
View File

@@ -1,9 +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"/>
<!-- Magnifying glass circle -->
<circle cx="14" cy="14" r="8" fill="#45475a" stroke="#cba6f7" stroke-width="2"/>
<circle cx="14" cy="14" r="8" fill="#45475a" stroke="#f9e2af" stroke-width="2"/>
<!-- Handle -->
<line x1="20" y1="20" x2="27" y2="27" stroke="#cba6f7" stroke-width="3" stroke-linecap="round"/>
<line x1="20" y1="20" x2="27" y2="27" stroke="#f9e2af" stroke-width="3" stroke-linecap="round"/>
<!-- Plus sign -->
<line x1="14" y1="10" x2="14" y2="18" stroke="#a6e3a1" stroke-width="2" stroke-linecap="round"/>
<line x1="10" y1="14" x2="18" y2="14" stroke="#a6e3a1" stroke-width="2" stroke-linecap="round"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 589 B

After

Width:  |  Height:  |  Size: 589 B

4
kindred-icons/zoom-out.svg
View File

@@ -1,9 +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"/>
<!-- Magnifying glass circle -->
<circle cx="14" cy="14" r="8" fill="#45475a" stroke="#cba6f7" stroke-width="2"/>
<circle cx="14" cy="14" r="8" fill="#45475a" stroke="#f9e2af" stroke-width="2"/>
<!-- Handle -->
<line x1="20" y1="20" x2="27" y2="27" stroke="#cba6f7" stroke-width="3" stroke-linecap="round"/>
<line x1="20" y1="20" x2="27" y2="27" stroke="#f9e2af" stroke-width="3" stroke-linecap="round"/>
<!-- Minus sign -->
<line x1="10" y1="14" x2="18" y2="14" stroke="#f38ba8" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 491 B

After

Width:  |  Height:  |  Size: 491 B