@hashicorp/mktg-logos

mktg-logos

This repo stores corporate and product logos used across a range of HashiCorp websites. See this Figma file for a full reference.

In brief, you can import assets from the follow paths. These are detailed in the "Available assets" section.

• @hashicorp/mktg-logos/products/<product>/<variant>/<color>.svg for product logos
• @hashicorp/mktg-logos/corporate/hashicorp/<variant>/<color>.svg for the HashiCorp logo

Example use

You can import SVG files from this package:

<img
  alt="Consul"
  className={s.logo}
  src={require("@hashicorp/mktg-logos/product/consul/primary/color.svg")}
/>

Note that project configuration can affect how the .svg files will be imported. For example, in many of our projects, we support an ?include suffix which imports the SVG as a string rather than a URL:

import svgHashicorpLogo from "@hashicorp/mktg-logos/corporate/hashicorp/primary/black.svg?include";

function MyComponent() {
  return (
    <a href="https://www.hashicorp.com/" aria-label="Go to HashiCorp home page">
      <InlineSvg className={s.logo} src={svgHashicorpLogo} />
    </a>
  );
}

For further examples, you can browse all uses of @hashicorp/mktg-logos in SourceGraph.

Available assets

Assets are organized under in top-level <category>/<asset> folders:

• corporate contains the hashicorp assets
• product contains specific <product> assets, eg waypoint and boundary

Each logo has a number of <variant> assets, including:

• logomark - just the product symbol, sometimes referred to as an icon
• primary - the standard product logo, includes the logomark and logotype
• primary-padding - the standard product logo, with padding to the left of the logomark
• vertical - a stacked variant

Each of these variants is available in multiple color variants. Colors include:

• black - monochrome black
• white - monochrome white
• color - color logomark with black text
• colorwhite - color logomark with white text
• whitetonal (some products only) - white with some shading

Note: You'll also see these <color> sub-variants prefixed with attributed - these include HashiCorp in the logo. Those without the attributed prefix do not include HashiCorp in the logo.

Publishing Changes

When changes are made to the source code, one needs to manually publish the changes on npm so as to make the newest version available. Publishing to npm can be done by running npm publish on main (npm publish command docs here). If this is your first time publishing, you may need to request to be added to the hashicorp npm org.