How to Integrate a Logo API: Complete Developer Guide
Step-by-step tutorial for integrating the Quikturn Logo API into your application using REST, the official SDK, or React components. Covers authentication, search methods, caching, and production best practices.
Adding company logos to your application can dramatically improve user experience, whether you're building a CRM, trading platform, or business intelligence dashboard. In this guide, we'll walk through integrating the Quikturn Logo API from start to finish.
By the end, you'll have a production-ready integration with proper error handling, caching, and fallback strategies.
Prerequisites
- A Quikturn account (free tier works for this tutorial)
- Basic knowledge of REST APIs and HTTP requests
- Node.js, Python, or any language that can make HTTP requests
Step 1: Get Your API Key
First, sign up for a Quikturn account and generate your API key from the developer dashboard.
- Visit getquikturn.io/signup and create an account
- Navigate to the API section in your dashboard
- Click "Generate API Key" to create your credentials
- Copy and securely store your API key (it won't be shown again)
Step 2: Make Your First Request
The Quikturn API uses simple REST endpoints with Bearer token authentication. Here's how to fetch a logo:
const API_KEY = process.env.QUIKTURN_API_KEY;
const BASE_URL = 'https://api.getquikturn.io/v1';
async function getLogo(domain) {
const response = await fetch(
`${BASE_URL}/logo?domain=${encodeURIComponent(domain)}`,
{
headers: {
'Authorization': `Bearer ${API_KEY}`,
'Content-Type': 'application/json'
}
}
);
if (!response.ok) {
throw new Error(`API error: ${response.status}`);
}
return response.json();
}
// Usage
const logo = await getLogo('stripe.com');
console.log(logo);import os
import requests
API_KEY = os.environ.get('QUIKTURN_API_KEY')
BASE_URL = 'https://api.getquikturn.io/v1'
def get_logo(domain: str) -> dict:
response = requests.get(
f'{BASE_URL}/logo',
params={'domain': domain},
headers={
'Authorization': f'Bearer {API_KEY}',
'Content-Type': 'application/json'
}
)
response.raise_for_status()
return response.json()
# Usage
logo = get_logo('stripe.com')
print(logo['logoUrl'])Alternative: Use the Official SDK
Instead of making raw HTTP requests, you can use our official TypeScript SDK for a better developer experience with built-in retries, typed errors, batch operations, and more.
# Core SDK (browser + server + URL builder)
npm install @quikturn/logos
# React components (optional)
npm install @quikturn/logos-reactimport { QuikturnLogos } from "@quikturn/logos/server";
const client = new QuikturnLogos({
secretKey: process.env.QT_SECRET_KEY
});
// Single logo
const { buffer, metadata } = await client.get("stripe.com", {
size: 256,
format: "webp"
});
// Batch fetch with concurrency control
for await (const result of client.getMany(
["stripe.com", "github.com", "vercel.com"],
{ concurrency: 5 }
)) {
if (result.success) {
console.log(result.domain, result.buffer.length);
}
}import { QuikturnProvider, QuikturnLogo,
QuikturnLogoCarousel } from "@quikturn/logos-react";
function App() {
return (
<QuikturnProvider token="pk_live_xxx">
<QuikturnLogo domain="stripe.com" size={64} />
<QuikturnLogoCarousel
domains={["stripe.com", "github.com", "vercel.com"]}
speed={120}
pauseOnHover
/>
</QuikturnProvider>
);
}getMany() method fetches multiple logos concurrently with built-in backoff on rate limits.Step 3: Choose Your Search Method
Quikturn supports three ways to find logos, depending on what data you have available:
Search by Domain
Best for: CRMs, email clients, website enrichment
GET /v1/logo?domain=microsoft.comSearch by Company Name
Best for: User-facing search, fuzzy matching needs
GET /v1/logo?name=Goldman%20SachsSearch by Ticker Symbol
Best for: Trading platforms, financial dashboards, portfolio apps
GET /v1/logo?ticker=AAPLStep 4: Implement Caching
Logos rarely change, so aggressive caching improves performance and reduces API costs:
// Simple in-memory cache (use Redis for production)
const logoCache = new Map();
const CACHE_TTL = 24 * 60 * 60 * 1000; // 24 hours
async function getCachedLogo(domain) {
const cacheKey = `logo:${domain}`;
const cached = logoCache.get(cacheKey);
if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
return cached.data;
}
const logo = await getLogo(domain);
logoCache.set(cacheKey, {
data: logo,
timestamp: Date.now()
});
return logo;
}Step 5: Production Best Practices
Use Environment Variables
Never hardcode API keys. Use environment variables or a secrets manager like AWS Secrets Manager or HashiCorp Vault.
Implement Request Queuing
For bulk operations, queue requests to stay within rate limits. Process logos asynchronously and update your UI as they complete.
Provide Fallback Images
Not every company has a logo in the database. Always have a fallback image or placeholder to maintain UI consistency.
What's Next?
Now that you have a working integration, explore these advanced features:
- Logo SDK: Install
@quikturn/logosfor TypeScript-native integration with typed errors, retries, and server-side batch operations - React SDK: Install
@quikturn/logos-reactfor drop-in QuikturnLogo, QuikturnLogoCarousel, and QuikturnLogoGrid components - Server-Side Batch: Use
client.getMany()to fetch hundreds of logos concurrently with automatic rate limit handling - Web Component: Use
<quikturn-logo>for framework-agnostic integration in any web app
Conclusion
You now have everything you need to integrate company logos into your application. Whether you use the REST API directly, our TypeScript SDK for server-side operations, or the React SDK for drop-in components, Quikturn makes it easy to add professional logo support to any project.
Questions or need help? Reach out to our developer support team - we're here to help you build something great.