Logos
Identity
American Express logos identify our global organization, business, and products, all under one brand. For more about how to use American Express logos, refer to the Amex Brand Box.
The Blue Box
A Key Component
The Blue Box is the most recognizable logo at American Express, and is the symbol of our whole brand. It should have a place of prominence in every American Express touchpoint and communication where space allows.
There are two Blue Box logos: the Standard Blue Box Logo and the Magnified Blue Box Logo (for use in smaller placements).
The Blue Box Logo
The Blue Box Logo should only be rendered in Bright Blue. The selected background color or image area should always allow for optimal Blue Box Logo legibility.
X-Small
Specs - X-Small
Size = 36x36px
Class Name = .dls-logo-bluebox-solid-xs
<span class="dls-logo-bluebox-solid-xs"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-bluebox-solid.svg" alt="American Express"></span>Small
Specs - Small
Size = 45x45px
Class Name = .dls-logo-bluebox-solid-sm
<span class="dls-logo-bluebox-solid-sm"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-bluebox-solid.svg" alt="American Express"></span>Medium
Specs - Medium
Size = 50x50px
Class Name = .dls-logo-bluebox-solid-md
<span class="dls-logo-bluebox-solid-md"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-bluebox-solid.svg" alt="American Express"></span>Large
Specs - Large
Size = 60x60px
Class Name = .dls-logo-bluebox-solid-lg
<span class="dls-logo-bluebox-solid-lg"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-bluebox-solid.svg" alt="American Express"></span>The Magnified Blue Box
The Magnified Blue Box Logo should be used in contexts where scale is restricted, such as on the mobile app. It is a supporting logo only, and should replace the core Blue Box Logo in the small-scale environments for readability.
FavIcon
Specs - FavIcon
Use this size for favicons only.
Size = 16x16px
<link rel="icon" href="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/favicon.ico" type="image/x-icon" />X-Small
Specs - X-Small
Size = 36x36px
Class Name = .dls-logo-bluebox-alt-xs
<span class="dls-logo-bluebox-alt-xs"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-bluebox-alt.svg" alt="American Express"></span>Small
Specs - Small
Size = 45x45px
Class Name = .dls-logo-bluebox-alt-sm
<span class="dls-logo-bluebox-alt-sm"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-bluebox-alt.svg" alt="American Express"></span>Medium
Specs - Medium
Size = 50x50px
Class Name = .dls-logo-bluebox-alt-md
<span class="dls-logo-bluebox-alt-md"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-bluebox-alt.svg" alt="American Express"></span>Large
Specs - Large
Size = 60x60px
Class Name = .dls-logo-bluebox-alt-lg
<span class="dls-logo-bluebox-alt-lg"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-bluebox-alt.svg" alt="American Express"></span>The Logotype
The logotype has two versions: single-line and stacked. Either can be used at the designer’s discretion and as space requires. The logotype may be used in place of the Blue Box.
Don’t scale the logotype below the minimum size found on this page. The logotype can be placed on imagery as long as it is very legible.
The Single-line Logotype
The single-line logotype is used more commonly than the stacked version.
X-Small
Specs - X-Small
Size = 140x9px
Class Name = .dls-logo-line-xs
<span class="dls-logo-line-xs"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-line.svg" alt="American Express"></span>Small
Specs - Small
Size = 235x15px
Class Name = .dls-logo-line-sm
<span class="dls-logo-line-sm"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-line.svg" alt="American Express"></span>Medium
Specs - Medium
Size = 280x18px
Class Name = .dls-logo-line-md
<span class="dls-logo-line-md"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-line.svg" alt="American Express"></span>Large
Specs - Large
Size = 364x24px
Class Name = .dls-logo-line-lg
<span class="dls-logo-line-lg"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-line.svg" alt="American Express"></span>The Stacked Logotype
The stacked logotype is best used when there is no room for the single-line logotype.
X-Small
Specs - X-Small
Size = 90x25px
Class Name = .dls-logo-stack-xs
<span class="dls-logo-stack-xs"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-stack.svg" alt="American Express"></span>Small
Specs - Small
Size = 100x28px
Class Name = .dls-logo-stack-sm
<span class="dls-logo-stack-sm"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-stack.svg" alt="American Express"></span>Medium
Specs - Medium
Size = 114x31px
Class Name = .dls-logo-stack-md
<span class="dls-logo-stack-md"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-stack.svg" alt="American Express"></span>Large
Specs - Large
Size = 150x41px
Class Name = .dls-logo-stack-lg
<span class="dls-logo-stack-lg"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-stack.svg" alt="American Express"></span>Logotype Color Usage
Only render the logotypes in Bright Blue, Deep Blue, or White.
Bright Blue
Specs - Bright Blue
Single-Line Logo Class Name = .dls-logo-line-md
Stacked Logo Class Name = .dls-logo-stack-lg
<div class="flex flex-align-start">
<span class="dls-logo-line-md margin-3-r margin-2-b"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-line.svg" alt="American Express"></span>
<span class="dls-logo-stack-lg padding-3-l margin-2-b"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-stack.svg" alt="American Express"></span>
</div>Deep Blue
Specs - Deep Blue
Single-Line Logo Class Name = .dls-logo-line-md
Stacked Logo Class Name = .dls-logo-stack-lg
<div class="flex flex-align-start">
<span class="dls-logo-line-md margin-3-r margin-2-b"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-line-deep-blue.svg" alt="American Express"></span>
<span class="dls-logo-stack-lg margin-2-b"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-stack-deep-blue.svg" alt="American Express"></span>
</div>White
Specs - White
Single-Line Logo Class Name = .dls-logo-single-md
Stacked Logo Class Name = .dls-logo-stack-lg
<div class="flex flex-align-start dls-bright-blue-bg pad-2-t pad-2-l">
<span class="dls-logo-line-md margin-3-r margin-2-b"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-line-white.svg" alt="American Express"></span>
<span class="dls-logo-stack-lg padding-3-l margin-2-b"><img src="https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/logos/dls-logo-stack-white.svg" alt="American Express"></span>
</div>