Thư viện 4000+ biểu tượng SVG thương hiệu

TL;DR

Bài này giới thiệu theSVG — thư viện chứa hơn 4000 logo thương hiệu (Facebook, Google, GitHub, v.v.) dạng SVG, dùng được trên React, Vue, Svelte, hoặc trực tiếp qua CDN. Dev có thể search, copy, hoặc import từng icon mà không cần tải cả bộ.

→ Người cần icon brand cho web/app: dùng được luôn, không phải lên Figma lục lọi.

Bài này dành cho ai?

1. Dev cần icon thương hiệu cho website/app

Vấn đề: Logo thương hiệu nằm khắp nơi — press kit Figma, GitHub repo lạ, không có nguồn thống nhất Khi nào cần: Làm trang partner, integrations, hoặc mục “used by” Được gì: 4000+ brand logo trong một chỗ, search được, copy paste là xong

2. Người build sản phẩm AI

Vấn đề: Cần icon để hiển thị danh sách tools AI trong app Khi nào cần: Làm dashboard, directory, hoặc comparison page Được gì: MCP server tích hợp sẵn cho Claude, Cursor, Windsurf — AI tự tìm và chèn icon

3. Designer cần icon nhanh

Vấn đề: Không muốn tự vẽ hoặc tìm từng logo trên Google Khi nào cần: Cần icon chuẩn SVG, đa biến thể (mono, light, dark) Được gì: Tải về xài ngay, có cả wordmark version

Các điểm chính

1. Brand icon chứ không phải UI icon Các thư viện icon thường chỉ có mấy cái arrows, checkmarks. theSVG tập trung vào logo thương hiệu — cái khó kiếm nhất. → Làm gì: Cần logo brand nào, search trên thesvg.org là có ngay.

2. Tree-shakeable — import icon nào xài icon đó Cài cả thư viện mà chỉ xài 2-3 cái? Không thành vấn đề vì có thể import riêng từng icon, không mang theo cả đống. → Làm gì: Dùng scoped package @thesvg/icons để import có chọn lọc.

3. 7 biến thể cho mỗi icon Mỗi brand có default (màu gốc), mono (theo text), light (trắng cho nền tối), dark (đen cho nền sáng), wordmark (có chữ), wordmark light/dark. → Làm gì: Chọn variant phù hợp với design system, không phải edit thủ công.

4. TypeScript-first, framework-agnostic Dùng React, Vue, Svelte, hay plain HTML đều được. Có type definitions đầy đủ, không sợ lỗi. → Làm gì: Team không cần discuss dùng framework nào, ai cũng xài được.

5. MCP server cho AI assistants Tích hợp sẵn cho Claude, Cursor, Windsurf. AI có thể tự tìm và chèn icon khi viết code. → Làm gì: Nếu đang dùng AI coding, thêm MCP server để nó tự xử lý phần icon.

6. Miễn phí, MIT license cho code Code tool là MIT, nhưng logo vẫn là trademark của brand đó. Dùng cho mục đích development/design thì ok. → Làm gì: Xài thoải mái trong sản phẩm, nhưng nhớ đọc phần disclaimer.

Quick Start

1. Cài đặt npm:

npm install thesvg

2. Import trong code:

import github from "thesvg/github";

console.log(github.svg);   // raw SVG string
console.log(github.hex);   // "181717" - màu brand

3. Hoặc dùng CDN không cần cài:

\<img src="https://thesvg.org/icons/github/default.svg" width="32" height="32" alt="GitHub" />

4. Search nhanh:

npx @thesvg/cli search "ai"