Using Ticker Symbols to Fetch Company Logos

Ticker symbols are the most intuitive way to identify stocks. Everyone knows AAPL is Apple, TSLA is Tesla, and MSFT is Microsoft. This guide shows you how to use ticker symbols to fetch company logos with the Elbstream Logo API.

Quick Start

Fetching a logo by ticker symbol is straightforward:

<img src="https://api.elbstream.com/logos/symbol/AAPL" alt="Apple logo" />

AAPL

TSLA

MSFT

API Endpoint

GET https://api.elbstream.com/logos/symbol/{symbol}

Path Parameters

Query Parameters

Examples

Basic Usage

<!-- Apple logo as SVG -->
<img src="https://api.elbstream.com/logos/symbol/AAPL" alt="Apple" />

<!-- Tesla logo as PNG -->
<img src="https://api.elbstream.com/logos/symbol/TSLA?format=png" alt="Tesla" />

<!-- Microsoft logo as 200x200 PNG -->
<img src="https://api.elbstream.com/logos/symbol/MSFT?format=png&size=200" alt="Microsoft" />

JavaScript Integration

function getLogoUrl(symbol, options = {}) {
  const { format = 'svg', size = 100 } = options;
  let url = `https://api.elbstream.com/logos/symbol/${symbol}`;

  if (format !== 'svg') {
    url += `?format=${format}&size=${size}`;
  }

  return url;
}

// Usage
const appleLogoUrl = getLogoUrl('AAPL');
const teslaLogoPng = getLogoUrl('TSLA', { format: 'png', size: 200 });

React Component

function StockLogo({ symbol, size = 48, format = 'svg' }) {
  const src = format === 'svg'
    ? `https://api.elbstream.com/logos/symbol/${symbol}`
    : `https://api.elbstream.com/logos/symbol/${symbol}?format=${format}&size=${size}`;

  return (
    <img
      src={src}
      alt={`${symbol} logo`}
      width={size}
      height={size}
    />
  );
}

// Usage
<StockLogo symbol="AAPL" />
<StockLogo symbol="TSLA" format="png" size={64} />

Vue Component

<template>
  <img :src="logoUrl" :alt="`${symbol} logo`" :width="size" :height="size" />
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  symbol: { type: String, required: true },
  format: { type: String, default: 'svg' },
  size: { type: Number, default: 48 }
});

const logoUrl = computed(() => {
  const base = `https://api.elbstream.com/logos/symbol/${props.symbol}`;
  return props.format === 'svg'
    ? base
    : `${base}?format=${props.format}&size=${props.size}`;
});
</script>

Symbol vs ISIN: When to Use Which

Symbol Conflicts

Be aware that ticker symbols can have conflicts:

• CRM on NYSE is Salesforce
• CRM on other exchanges might be different companies

For unambiguous identification, consider using ISIN lookups.

Popular Ticker Symbols

Here are some commonly requested symbols:

Tech Giants

• AAPL - Apple
• MSFT - Microsoft
• GOOGL - Alphabet (Google)
• AMZN - Amazon
• META - Meta (Facebook)
• NVDA - NVIDIA

Other Popular Stocks

• TSLA - Tesla
• JPM - JPMorgan Chase
• V - Visa
• JNJ - Johnson & Johnson
• WMT - Walmart

Error Handling

If a symbol is not found, the API returns a placeholder. Handle this gracefully:

const img = new Image();
img.onload = function() {
  // Logo loaded successfully
  document.getElementById('logo').appendChild(img);
};
img.onerror = function() {
  // Symbol not found, use fallback
  this.src = '/fallback-logo.svg';
};
img.src = `https://api.elbstream.com/logos/symbol/${symbol}`;

Best Practices

1. Use SVG when possible - Scales perfectly at any size
2. Lazy load images - Especially for long lists
3. Add meaningful alt text - Include the company name
4. Cache aggressively - Logos rarely change
5. Have a fallback - Handle missing logos gracefully

Attribution

The Logo API is free with attribution. Include a visible link:

<a href="https://elbstream.com">Logos provided by Elbstream</a>

Next Steps

• Try the Logo API Demo
• Read the Full API Documentation
• Learn about ISIN lookups
• Compare API vs DIY