**Migrated from GitHub issue icub3d/decentcom#86** **Original Author:** @icub3d **Original Date:** 2026-04-18T04:07:18Z --- # Feature: Brand Visual Identity (Logo & Icons) ## Overview Create a cohesive visual identity for decentcom by designing a logo that reflects its core principles of decentralization, identity ownership, and privacy. This includes generating SVG source files and converting them into all required icon formats for the Tauri app and the project website. ## Background Currently, the project uses placeholder icons. A unique, professional logo is essential for brand recognition and to communicate the project's "Discord-level UX, Matrix-level decentralization" value proposition. ## Requirements - [x] Create at least 3 distinct SVG logo concepts for review. - [x] Incorporate the Catppuccin Mocha palette (primary color: `blue`, accent: `sapphire` or `teal`). - [x] Logo must be legible at small sizes (16x16, 32x32) as well as large. - [x] Logo should have both a "full" version (icon + text) and an "icon-only" version (square). - [x] Generate web-specific assets (favicon.ico, favicon.svg, apple-touch-icon.png). ## Design ### API / Interface Changes N/A (Static assets) ### Data Model Changes N/A ### Component Changes - `client/src-tauri/icons/`: Update all platform-specific icons. - `client/public/`: Update `favicon.svg` and add logo assets. - `client/src/components/layout/TitleBar.tsx`: Integrate the new logo into the TitleBar (left of the app name). - `client/src/pages/Setup.tsx`: Use the logo on the welcome screen. - `site/public/`: Update `favicon.ico` and `favicon.svg`. ## Task List - [x] Phase 1: Conceptual Design - [x] Research and sketch 3 concepts (e.g., node-based, key-based, or abstract "D"). - [x] Create high-fidelity SVG versions of the concepts. - [x] Present for selection. - [x] Phase 2: Refinement & Export - [x] Finalize the selected logo (adjusting for light/dark modes if needed). - [x] Phase 3: Technical Implementation - [x] Run `pnpm tauri icon <source-png>` in the `client/` directory. - [x] Replace existing icons in `client/src-tauri/icons/`. - [x] Update web favicons in `client/public/` and `site/public/`. - [x] Phase 4: Integration - [x] Update `TitleBar.tsx` to display the new logo. - [x] Update `Setup.tsx` with the new logo. ## Test List - [x] Verify that `pnpm tauri build` succeeds with the new icons. - [x] Manually check the app icon on macOS, Windows, and Linux. - [x] Verify that the favicon appears correctly in browsers for both the app (dev mode) and the landing site. - [x] Check logo legibility in the TitleBar (approx 16-24px height).

icub3d commented

2026-04-26 16:46:17 +00:00

Owner

Migrated from GitHub issue icub3d/decentcom#86
Original Author: @icub3d
Original Date: 2026-04-18T04:07:18Z

Feature: Brand Visual Identity (Logo & Icons)

Overview

Create a cohesive visual identity for decentcom by designing a logo that reflects its core principles of decentralization, identity ownership, and privacy. This includes generating SVG source files and converting them into all required icon formats for the Tauri app and the project website.

Background

Currently, the project uses placeholder icons. A unique, professional logo is essential for brand recognition and to communicate the project's "Discord-level UX, Matrix-level decentralization" value proposition.

Requirements

Create at least 3 distinct SVG logo concepts for review.
Incorporate the Catppuccin Mocha palette (primary color: blue, accent: sapphire or teal).
Logo must be legible at small sizes (16x16, 32x32) as well as large.
Logo should have both a "full" version (icon + text) and an "icon-only" version (square).
Generate web-specific assets (favicon.ico, favicon.svg, apple-touch-icon.png).

Design

API / Interface Changes

N/A (Static assets)

Data Model Changes

N/A

Component Changes

client/src-tauri/icons/: Update all platform-specific icons.
client/public/: Update favicon.svg and add logo assets.
client/src/components/layout/TitleBar.tsx: Integrate the new logo into the TitleBar (left of the app name).
client/src/pages/Setup.tsx: Use the logo on the welcome screen.
site/public/: Update favicon.ico and favicon.svg.

Task List

Phase 1: Conceptual Design
- Research and sketch 3 concepts (e.g., node-based, key-based, or abstract "D").
- Create high-fidelity SVG versions of the concepts.
- Present for selection.
Phase 2: Refinement & Export
- Finalize the selected logo (adjusting for light/dark modes if needed).
Phase 3: Technical Implementation
- Run pnpm tauri icon <source-png> in the client/ directory.
- Replace existing icons in client/src-tauri/icons/.
- Update web favicons in client/public/ and site/public/.
Phase 4: Integration
- Update TitleBar.tsx to display the new logo.
- Update Setup.tsx with the new logo.

Test List

Verify that pnpm tauri build succeeds with the new icons.
Manually check the app icon on macOS, Windows, and Linux.
Verify that the favicon appears correctly in browsers for both the app (dev mode) and the landing site.
Check logo legibility in the TitleBar (approx 16-24px height).

icub3d

closed this issue
added the
type:feature

area:ux

status:complete
labels

Rows
Columns

type:feature: Brand Visual Identity (Logo & Icons) #61