Logo Sourcing Guide

This guide explains how to source and add company/technology logos to the portfolio website.

Primary Source: Wikipedia

Wikipedia is the recommended source for SVG logos because:

  • High-quality SVG files available for most major companies and technologies
  • Proper licensing information (usually Creative Commons or Public Domain)
  • Well-maintained and updated regularly
  • Free to use with proper attribution

How to Find Logos on Wikipedia

Method 1: Direct Wikipedia Page Search

  1. Search for the company/technology on Wikipedia
    • Example: https://en.wikipedia.org/wiki/Python_(programming_language)
    • Example: https://en.wikipedia.org/wiki/C%2B%2B
    • Example: https://en.wikipedia.org/wiki/NVIDIA
  2. Find the logo on the page
    • Usually in the infobox on the right side of the page
    • Click on the logo/icon image
  3. Download the SVG file
    • On the file page, look for “Original file” link
    • Click “Download” or right-click and “Save As…”
    • Prefer SVG format over PNG/JPEG when available

  1. Go to Wikimedia Commons: https://commons.wikimedia.org/

  2. Search for the logo
    • Search terms examples:
      • “Python logo”
      • “C++ logo”
      • “NVIDIA logo”
      • “ROS logo”
      • “KUKA logo”
  3. Filter by file type
    • Use the filter “File type: Drawing (SVG)”
    • Look for official logos (often labeled as such)
  4. Download the SVG
    • Click on the image
    • Click “Use this file” or “Download”
    • Save the SVG file

File Naming Convention

Save logos with lowercase, descriptive names:

  • python.svg for Python
  • cplusplus.svg for C++
  • csharp.svg for C#
  • nvidia.svg for NVIDIA
  • ros.svg for ROS (Robot Operating System)
  • kuka.svg for KUKA Robotics

Adding Attribution

Every SVG file should include attribution as XML comments at the top of the file:

<?xml version="1.0" encoding="UTF-8"?>
<!-- 
  Source: Wikimedia Commons / Wikipedia
  URL: [Direct link to the Wikipedia/Wikimedia file page]
  License: [e.g., Public Domain, CC BY-SA 4.0, etc.]
  Description: [Brief description of the logo]
-->
<svg ...>

Example Attribution

<?xml version="1.0" encoding="UTF-8"?>
<!-- 
  Source: Wikimedia Commons
  URL: https://commons.wikimedia.org/wiki/File:Python-logo-notext.svg
  License: GNU General Public License v2.0 or later
  Description: Official Python programming language logo
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  ...
</svg>

License Requirements

Common Licenses on Wikipedia/Wikimedia

  1. Public Domain
    • No attribution required, but recommended
    • Can be used freely for any purpose
  2. Creative Commons (CC BY, CC BY-SA)
    • Attribution required
    • Some may require share-alike (SA)
    • Include license info in SVG comments
  3. GNU General Public License (GPL)
    • Can be used freely
    • Include license notice in comments

What to Include

Always document:

  • Source (Wikipedia/Wikimedia Commons)
  • Direct URL to the file page
  • License type
  • Brief description

Finding Logos for Common Technologies

Programming Languages

  • Python: https://commons.wikimedia.org/wiki/File:Python-logo-notext.svg
  • C++: https://commons.wikimedia.org/wiki/File:ISO_C%2B%2B_Logo.svg
  • C#: https://commons.wikimedia.org/wiki/File:C_Sharp_logo.svg
  • JavaScript: https://commons.wikimedia.org/wiki/File:Javascript-shield.svg
  • TypeScript: https://commons.wikimedia.org/wiki/File:Typescript_logo_2020.svg

Frameworks & Libraries

  • ROS: https://commons.wikimedia.org/wiki/File:Ros_logo.svg
  • Node.js: https://commons.wikimedia.org/wiki/File:Node.js_logo.svg
  • React: https://commons.wikimedia.org/wiki/File:React-icon.svg

Companies

  • NVIDIA: https://commons.wikimedia.org/wiki/File:Nvidia_logo.svg
  • Microsoft: https://commons.wikimedia.org/wiki/File:Microsoft_logo_(2012).svg
  • Google: https://commons.wikimedia.org/wiki/File:Google_2015_logo.svg

Adding Logos to the Website

  1. Save the SVG file in the /logos/ directory

  2. Add attribution to the top of the SVG file (see format above)

  3. Use in HTML with the <img> tag: 
    <img src="logos/python.svg" alt="Python" class="w-7 h-7 hover:scale-110 transition duration-200" title="Python">
  4. Optimize if needed:
    • Remove unnecessary metadata (but keep attribution)
    • Simplify paths if the file is too large
    • Tools: SVGOMG (https://jakearchibald.github.io/svgomg/)

Alternative Sources

If a logo is not available on Wikipedia/Wikimedia Commons:

  1. Official Company/Project Website
    • Check for press/media kits
    • Look for brand guidelines
    • Respect usage terms
  2. GitHub Repositories
    • Official project logos in repos
    • Check the license in the repo
  3. LogosWorld / Simple Icons
    • https://simpleicons.org/ (CC0 licensed icons)
    • Good for tech logos

Quality Guidelines

  • Prefer SVG over raster formats (PNG, JPG)
  • Check the viewBox - should be properly set
  • Test dark/light mode - ensure logos are visible in both themes
  • Size appropriately - the site uses w-7 h-7 (28px × 28px)
  • Optimize file size - remove unnecessary elements

Updating Existing Logos

To update an existing logo:

  1. Find a better quality version on Wikipedia/Wikimedia
  2. Download the new SVG
  3. Add proper attribution
  4. Replace the old file
  5. Test in both light and dark modes
  6. Commit with a descriptive message

Resources

  • Wikimedia Commons: https://commons.wikimedia.org/
  • Wikipedia: https://wikipedia.org/
  • Simple Icons: https://simpleicons.org/
  • SVGOMG Optimizer: https://jakearchibald.github.io/svgomg/
  • Creative Commons Licenses: https://creativecommons.org/licenses/

Example Workflow

# 1. Search Wikipedia/Wikimedia Commons for logo
# 2. Download SVG file
# 3. Rename file (e.g., python.svg)
# 4. Add attribution comments
# 5. Save to logos/ directory
# 6. Test in browser
# 7. Commit changes

git add logos/python.svg
git commit -m "Add Python logo from Wikimedia Commons"

Notes

  • Always respect copyright and licensing terms
  • When in doubt, check the license on the source page
  • Public domain and Creative Commons are safest choices
  • Commercial use may have different requirements
  • Keep attribution even for public domain images (best practice)