Social Media Icons — Footer Component (Both Sites)¶

SURFACE: ucco.foundation (ucco-site) + ucca.online (ucca-site)
CF ACCOUNT (UCCO): aed3398a4e698767328cc3a9e698721d
CF ACCOUNT (UCCA): e5a9830215a8d88961dc6c80a8c7442a
DO NOT TOUCH: everything else

→ TIM¶

Adding social media icons to the footer of both sites. Links are placeholder (#) until accounts are created. SVG keyline icons in a minimal style — consistent with both sites' design language. No colour fills, just outlined/keyline icons in a subtle row.

→ ALEX¶

1. Icon Set¶

Use Lucide icons (already in the stack) or inline SVGs. Keyline/outline style only — no filled/coloured brand icons. All icons same size, same stroke weight, same muted colour.

UCCO Foundation (ucco.foundation) — footer icons:

Platform	Icon	Link (placeholder)
GitHub	`Github`	`https://github.com/ucco-foundation`
YouTube	`Youtube`	`#`
LinkedIn	`Linkedin`	`#`
X/Twitter	`Twitter`	`#`
Bluesky	Custom SVG (butterfly)	`#`

UCCA Inc (ucca.online) — footer icons:

Platform	Icon	Link (placeholder)
GitHub	`Github`	`#`
YouTube	`Youtube`	`#`
LinkedIn	`Linkedin`	`#`
X/Twitter	`Twitter`	`#`
Bluesky	Custom SVG (butterfly)	`#`

GitHub on UCCO links to the live org. All others are # until Tim creates the accounts.

2. Design¶

Style: - Keyline/outline icons only — no brand colours, no fills - Stroke colour matches footer text colour (muted, low contrast) - On hover: brighten to full footer text colour (subtle, not dramatic) - Icon size: 20px × 20px - Spacing: 16px gap between icons - Row alignment: centred in footer, or right-aligned alongside existing footer links — match the existing footer layout

UCCO footer currently has:

Standard | GitHub | Contact

Add the icon row below this existing text row, with a subtle separator (thin line or spacing).

UCCA footer: Match whatever footer layout exists. Add icons in the same position/pattern as UCCO.

3. Bluesky SVG¶

Bluesky isn't in Lucide. Use this inline SVG (the official butterfly mark):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 568 501" width="20" height="20" fill="none" stroke="currentColor" stroke-width="40">
  <path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552 224.501C531.879 296.954 458.359 315.421 392.044 303.271C507.746 323.552 536.917 396.869 474 467.869C355.579 601.319 307.559 395.196 290.427 343.307C287.346 334.232 285.882 329.898 284 329.898C282.118 329.898 280.654 334.232 277.573 343.307C260.441 395.196 212.421 601.319 94 467.869C31.0827 396.869 60.2539 323.552 175.956 303.271C109.641 315.421 36.1213 296.954 16 224.501C9.94527 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1339 -1.61183 123.121 33.6637Z"/>
</svg>

Adjust stroke-width to match Lucide icon weight visually. The Bluesky mark is a fill shape so you may need to render it as filled at very small size with fill="currentColor" and stroke="none" instead — test both and pick whichever looks consistent with the Lucide keyline icons.

4. Shared Component¶

Build as <SocialIcons /> component:

<SocialIcons
  links={{
    github: "https://github.com/ucco-foundation",
    youtube: "#",
    linkedin: "#",
    twitter: "#",
    bluesky: "#"
  }}
/>

Reusable on both sites. Placeholder links (#) show the icon but go nowhere — no broken link behaviour. When Tim creates accounts, we just update the URLs.

5. Accessibility¶

Each icon wrapped in <a> with aria-label (e.g., "GitHub", "YouTube", "LinkedIn")
Placeholder links (#) get aria-disabled="true" and tabindex="-1" so they're visually present but not keyboard-focusable until real URLs are set
Icons have role="img" with appropriate labels

Deployment Checklist¶

Social icons in ucco.foundation footer
Social icons in ucca.online footer
GitHub link live on UCCO (points to ucco-foundation org)
All other links placeholder (#)
Keyline style consistent with site design
Hover state works
Bluesky SVG renders correctly at 20px
Mobile responsive (icons don't wrap awkwardly)
Accessibility labels set

Quick brief — Social Media Footer Icons 16 March 2026