Add company logos by stock ticker to a React watchlist

01 · SETUP

Use the component in your existing React project

Download CompanyWatchlist.jsx and place it beside your App component. It exports a complete example watchlist and a reusable CompanyLogo component. No extra package is required beyond React.

Open the Company Logo URLs reference. Sign in there if the asset convention is hidden, then copy the base folder before {TICKER}.png. Supply that folder as logoBaseUrl:

import CompanyWatchlist from "./CompanyWatchlist";

// Replace this with the base folder shown in the Company Logo URLs docs.
const logoBaseUrl = "https://YOUR_ASSET_HOST/YOUR_LOGO_FOLDER";

export default function App() {
  return <CompanyWatchlist logoBaseUrl={logoBaseUrl} />;
}

The example includes Apple, Microsoft and Palantir. The placeholder host must be replaced before their images load. Logo requests use direct image URLs; they do not call a JSON endpoint or need your API key in the browser.

02 · COMPONENT

Add a company logo by stock ticker

Use the named export anywhere you show a company. The component trims and uppercases the ticker, validates it and builds the PNG URL from your configured asset folder.

import {CompanyLogo} from "./CompanyWatchlist";

// Place this inside a component where logoBaseUrl is configured.
<CompanyLogo ticker="MSFT" name="Microsoft" logoBaseUrl={logoBaseUrl} size={48} />

VizualStocks logos are normalized onto balanced square canvases. The component uses equal width and height with objectFit: "contain", so logos are not cropped to circles or stretched to fit a row. Explicit dimensions reserve the space before the image arrives and reduce layout shifts.

A ticker is the identifier here, not a company domain. Use symbols from your own company records or the List Companies endpoint; do not guess a symbol from a display name.

03 · WATCHLIST

Keep company names and tickers readable

const companies = [
  {ticker: "MSFT", name: "Microsoft"},
  {ticker: "PLTR", name: "Palantir"},
];

// Place this inside your App component.
<CompanyWatchlist companies={companies} logoBaseUrl={logoBaseUrl} />

Each row has a stable ticker key, a company name and its symbol. In this layout, the image is decorative because the adjacent text already names the company. The example therefore supplies an empty alt attribute to avoid repeating that name to screen readers.

When a logo stands alone, leave decorative false and pass the company name for a useful accessible label. Do not use a logo as the only way to identify a company, especially while images are loading.

04 · FALLBACK

Show a readable fallback instead of a broken-image icon

The full downloaded component displays a ticker fallback if the URL is missing, invalid or fails to load. This excerpt shows its image-loading behavior:

// From CompanyLogo: remember which URL failed, without retrying it forever.
const [failedUrl, setFailedUrl] = useState(null);

<img
  src={url}
  alt={decorative ? "" : name + " logo"}
  width={size}
  height={size}
  loading="lazy"
  decoding="async"
  onError={() => setFailedUrl(url)}
  style={{objectFit: "contain"}}
/>

The failed URL is remembered, so a missing image does not trigger an endless retry loop. Changing the ticker or asset folder produces a different URL and allows the new image to load. The fallback keeps the same dimensions as the image.

loading="lazy" defers offscreen images, while asynchronous decoding helps avoid blocking the rest of the watchlist. These are browser hints, not a guarantee about the exact download time. For a prominent above-the-fold logo, you can change the component to eager loading.

05 · CHECK

Test the watchlist before shipping it

1. Confirm the three sample images load with the configured base folder.
2. Try lowercase msft; the asset request should use uppercase.
3. Use a deliberately nonexistent ticker and confirm the fallback appears without repeated network requests.
4. Switch a row from a missing ticker to a valid one and confirm its image recovers.
5. Check the layout in dark and light themes and on a narrow screen. Company names must remain readable when images are disabled.

The logo asset contract is separate from the JSON endpoints. The docs describe media requests as not consuming API request capacity.

If images fail, check the request URL and status in your browser’s Network panel. Ensure the base folder is correct and the site’s existing Content Security Policy allows that image host. Do not disable CSP or put API credentials into client code to work around a failed image.

References: Company Logo URLs · React DOM event handlers · HTML image attributes.