Feature: ICCery Vector Logo Branding & Header Layout #23

New Issue

2026-08-23T10:02:25+01:00

gronod commented

2026-08-23 10:02:25 +01:00

Summary

Incorporate the new official vector SVG branding for ICCery across the application UI.

Tasks

Integrate ICCery-logo.svg into assets
Replace text branding in the main header with SVG logo
Display logo at the top of the "About ICCery" modal
Adjust contrast by setting "ICC" text to white for dark backgrounds
Optimize logo scaling and header spacing/button positioning (Settings & About buttons)
Enhance dark mode styling for select dropdowns and options

Logo Asset

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 160" width="100%" height="100%">
  <defs>
    <clipPath id="coneClip">
      <path d="M 50 82 L 110 82 L 80 142 Z" />
    </clipPath>
    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#00AEEF" />
      <stop offset="100%" stop-color="#0066CC" />
    </linearGradient>
  </defs>

  <!-- Drop Shadow -->
  <ellipse cx="80" cy="145" rx="25" ry="5" fill="#1E293B" opacity="0.1" />

  <!-- Ice Cream Cone (Waffle) -->
  <path d="M 50 82 L 110 82 L 80 142 Z" fill="#FAD7A1" stroke="#E59866" stroke-width="2.5" stroke-linejoin="round"/>
  <g clip-path="url(#coneClip)" stroke="#E59866" stroke-width="2">
    <line x1="40" y1="80" x2="120" y2="160" />
    <line x1="55" y1="80" x2="135" y2="160" />
    <line x1="70" y1="80" x2="150" y2="160" />
    <line x1="85" y1="80" x2="165" y2="160" />

    <line x1="120" y1="80" x2="40" y2="160" />
    <line x1="105" y1="80" x2="25" y2="160" />
    <line x1="90" y1="80" x2="10" y2="160" />
    <line x1="75" y1="80" x2="-5" y2="160" />
  </g>

  <!-- CMYK Scoops (C, M, Y) -->
  <circle cx="63" cy="72" r="22" fill="#00BCEB" stroke="#ffffff" stroke-width="2.5"/>
  <circle cx="97" cy="72" r="22" fill="#EC008C" stroke="#ffffff" stroke-width="2.5"/>
  <circle cx="80" cy="48" r="22" fill="#FFED00" stroke="#ffffff" stroke-width="2.5"/>

  <!-- Black (Key) Cherry -->
  <path d="M 80 23 Q 92 12 96 16" fill="none" stroke="#1E293B" stroke-width="2" stroke-linecap="round"/>
  <circle cx="80" cy="24" r="7" fill="#1E293B" stroke="#ffffff" stroke-width="1.5"/>

  <!-- Highlights on scoops for 3D effect -->
  <circle cx="58" cy="67" r="4" fill="#ffffff" opacity="0.35"/>
  <circle cx="92" cy="67" r="4" fill="#ffffff" opacity="0.35"/>
  <circle cx="75" cy="43" r="4" fill="#ffffff" opacity="0.45"/>
  <circle cx="78" cy="22" r="1.5" fill="#ffffff" opacity="0.6"/>

  <!-- Text: ICCery -->
  <text font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="58" font-weight="800" x="140" y="105" fill="#ffffff" letter-spacing="-1">ICC<tspan fill="url(#textGrad)">ery</tspan></text>
</svg>

### Summary Incorporate the new official vector SVG branding for ICCery across the application UI. ### Tasks - [x] Integrate `ICCery-logo.svg` into assets - [x] Replace text branding in the main header with SVG logo - [x] Display logo at the top of the "About ICCery" modal - [x] Adjust contrast by setting "ICC" text to white for dark backgrounds - [x] Optimize logo scaling and header spacing/button positioning (Settings & About buttons) - [x] Enhance dark mode styling for select dropdowns and options ### Logo Asset ```xml <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 160" width="100%" height="100%"> <defs> <clipPath id="coneClip"> <path d="M 50 82 L 110 82 L 80 142 Z" /> </clipPath> <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#00AEEF" /> <stop offset="100%" stop-color="#0066CC" /> </linearGradient> </defs>  <ellipse cx="80" cy="145" rx="25" ry="5" fill="#1E293B" opacity="0.1" />  <path d="M 50 82 L 110 82 L 80 142 Z" fill="#FAD7A1" stroke="#E59866" stroke-width="2.5" stroke-linejoin="round"/> <g clip-path="url(#coneClip)" stroke="#E59866" stroke-width="2"> <line x1="40" y1="80" x2="120" y2="160" /> <line x1="55" y1="80" x2="135" y2="160" /> <line x1="70" y1="80" x2="150" y2="160" /> <line x1="85" y1="80" x2="165" y2="160" /> <line x1="120" y1="80" x2="40" y2="160" /> <line x1="105" y1="80" x2="25" y2="160" /> <line x1="90" y1="80" x2="10" y2="160" /> <line x1="75" y1="80" x2="-5" y2="160" /> </g>  <circle cx="63" cy="72" r="22" fill="#00BCEB" stroke="#ffffff" stroke-width="2.5"/> <circle cx="97" cy="72" r="22" fill="#EC008C" stroke="#ffffff" stroke-width="2.5"/> <circle cx="80" cy="48" r="22" fill="#FFED00" stroke="#ffffff" stroke-width="2.5"/>  <path d="M 80 23 Q 92 12 96 16" fill="none" stroke="#1E293B" stroke-width="2" stroke-linecap="round"/> <circle cx="80" cy="24" r="7" fill="#1E293B" stroke="#ffffff" stroke-width="1.5"/>  <circle cx="58" cy="67" r="4" fill="#ffffff" opacity="0.35"/> <circle cx="92" cy="67" r="4" fill="#ffffff" opacity="0.35"/> <circle cx="75" cy="43" r="4" fill="#ffffff" opacity="0.45"/> <circle cx="78" cy="22" r="1.5" fill="#ffffff" opacity="0.6"/>  <text font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="58" font-weight="800" x="140" y="105" fill="#ffffff" letter-spacing="-1">ICC<tspan fill="url(#textGrad)">ery</tspan></text> </svg> ```

gronod referenced a pull request that will close this issue

2026-08-23 10:02:30 +01:00

feat: Implement ICCery SVG logo branding and UI layout refinements (closes #23) #24

gronod closed this issue

2026-08-23 10:02:36 +01:00

gronod referenced this issue from a commit

2026-08-23 10:02:37 +01:00

Merge pull request 'feat: Implement ICCery SVG logo branding and UI layout refinements (closes #23)' (#24) from feature/logo into development

Sign in to join this conversation.