---
layout: default
title: Logo
nav_order: 12
---

# Logo

## Download

### Color

<img src="logo/viewcomponent-color-logo.svg" alt="Full ViewComponent logo in red and black" class="px-1 mt-2 mbn-2" style="margin-bottom: -1rem">

Full logo for light backgrounds ([SVG](logo/viewcomponent-color-logo.svg) • [PNG](logo/viewcomponent-color-logo.png))

<img src="/logo/viewcomponent-color-logo-inverse.svg" alt="Full ViewComponent logo in red and white" class="bg-grey-dk-200 p-1 mt-2 mbn-2" style="margin-bottom: -1rem">

Full logo for dark backgrounds ([SVG](logo/viewcomponent-color-logo-inverse.svg) • [PNG](logo/viewcomponent-color-logo-inverse.png))

<img src="logo/viewcomponent-color-logomark.svg" alt="ViewComponent logomark in red" class="px-1 mt-2 mbn-2" style="margin-bottom: -1rem">

Logomark for light or dark backgrounds ([SVG](logo/viewcomponent-color-logomark.svg) • [PNG](logo/viewcomponent-color-logomark.png))

### Black

<img src="logo/viewcomponent-black-logo.svg" alt="Full ViewComponent logo in black" class="px-1 mt-2 mbn-2" style="margin-bottom: -1rem">

Full logo for light backgrounds ([SVG](logo/viewcomponent-black-logo.svg) • [PNG](logo/viewcomponent-black-logo.png))

<img src="logo/viewcomponent-black-logomark.svg" alt="ViewComponent logomark in black" class="px-1 mt-2 mbn-2" style="margin-bottom: -1rem">

Logomark for light backgrounds ([SVG](logo/viewcomponent-black-logomark.svg) • [PNG](logo/viewcomponent-black-logomark.png))

### White

<img src="/logo/viewcomponent-white-logo.svg" alt="Full ViewComponent logo in white" class="bg-grey-dk-200 p-1 mt-2 mbn-2" style="margin-bottom: -1rem">

Full logo for dark backgrounds ([SVG](logo/viewcomponent-white-logo.svg) • [PNG](logo/viewcomponent-white-logo.png))

<img src="/logo/viewcomponent-white-logomark.svg" alt="ViewComponent logomark in white" class="bg-grey-dk-200 p-1 mt-2 mbn-2" style="margin-bottom: -1rem">

Logomark for dark backgrounds ([SVG](logo/viewcomponent-white-logomark.svg) • [PNG](logo/viewcomponent-white-logomark.png))

## Colors

### ViewComponent red

* `#DF3730`
* `hsl(2 73% 53%)`
* `rbg(223 55 48)`
* `cmyk(5% 89% 82% 0%)`

## Usage

Use these marks to refer to the ViewComponent project in a way that doesn't claim endorsement or association.

Don't use these marks in a commercial setting to infer that a product or service is endorsed or associated with ViewComponent without permission.

Reach out before using the ViewComponent logo on a book cover or merchandise.

## About

[Dylan Smith](https://dylanatsmith.com) contributed the ViewComponent logo. It is licensed under the MIT license.
