Nigerian Bank Logos - NBL

Kehinde Omopariola

Completed work

Design Engineer

Frontend Engineer

Software Engineer

Figma

Next.js

TypeScript

Design

Technologies: Next.js, React, TypeScript, Tailwind CSS, Fusejs, Upstash/Redis, SVGO, Brimble

Project Overview

Duration: 3 days Role: Creator & Developer GitHub: Source Repo Figma: https://www.figma.com

What started as a casual Twitter interaction turned got deployed to production asa logo resource for designers and developers. Built a comprehensive collection of high-quality SVG logos for Nigerian banks, fintech companies, and NGX-listed businesses - going viral in the Nigerian tech community within days of launch.

Key Accomplishments

🚀 Impressive Community Impact in 72 Hours

Built and launched complete platform in 3 days after seeing a need in the Nigerian design community

Impressive Twitter Engagement with designers and developers sharing the resource across Nigerian tech Twitter

Homepage

Copy SVGs in diff format

What each page looks like on mobile

🎨 Complete Design Ecosystem

High-quality SVG collection - curated logos for banks, fintech companies, and NGX-listed businesses

Multiple download formats - SVG, PNG, and various sizes for different use cases

Figma plugin integration - designers can insert logos directly into their designs

Public API - developers can programmatically access all logos for their applications

*Figma plugin interface showing logo insertion workflow*

🔍 Developer-Friendly Features

Smart search functionality using Fuse.js for fuzzy searching across logo names and categories

Organized categorization - "Banks," "Fintech," "NGX," and custom categories

Light/dark mode support - fully responsive design for both themes

Copy-paste optimization - one-click copying for quick designer workflow

Fuzzy search

🌍 Open Source Community Building

Open source from day one - encouraging community contributions and improvements

Easy contribution process - clear guidelines for adding new logos

Quality standards - SVG optimization with SVGOMG integration and file size limits

Community moderation - proper licensing and permission verification for all submissions

Technical Implementation

Smart Resource Management

Built an efficient system for handling hundreds of SVG assets:

Automatic SVG optimization using SVGO to reduce file sizes without quality loss

Dynamic loading - only loads visible logos to improve initial page speed

Metadata management - comprehensive logo information including categories, URLs, and ticker symbols

API architecture - RESTful endpoints for programmatic access

Search and Discovery

Fuzzy search implementation with Fuse.js allowing typo-tolerant searching

Category filtering - multiple categories per logo with smart filtering logic

Responsive grid layout - adapts beautifully across all device sizes

Keyboard navigation - full accessibility support for power users

Developer Experience

// Simple API usage example
fetch('https://api.nigerianbanklogos.xyz')
  .then(response => response.json())
  .then(logos => {
    // Access to all Nigerian bank logos programmatically
    console.log(logos);
  }

Figma Plugin Architecture

Built complementary Figma plugin that:

Syncs with main database - always up-to-date logo collection

Drag-and-drop insertion - seamless integration into design workflow

Search within Figma - no need to leave design environment

Multiple format support - insert as SVG or convert to other formats

Sometimes the best projects start with a simple observation: "This should exist, but it doesn't." Three days later, hundreds of people agree.

Like this project