Atlas Logo - React Native

For development, import AtlasLogo from @servicetitan/anvil2-rn. For design, find it in the Mobile Agentic Component Library file.

Implementation
AtlasLogo Props

import { AtlasLogo } from "@servicetitan/anvil2-rn";

function App() {
  return <AtlasLogo size={40} />;
}

Common Examples

To use the AtlasLogo, render it and optionally set size. The mark is square. Fills are fixed brand gradients.

import { AtlasLogo } from "@servicetitan/anvil2-rn";

function ExampleComponent() {
  return <AtlasLogo />;
}

color is accepted so the mark matches the icon size/color contract, and it is ignored.Pass label when the mark is the only name for Atlas on screen. Omit label when nearby text already names it, so assistive tech skips the decorative graphic.

<AtlasLogo size={24} label="Atlas" />

Accessibility

With label, the mark is an image with that accessible name.
Without label, the mark is hidden from assistive tech.

<AtlasLogo size={24} label="Atlas" />

`AtlasLogo` Props

The AtlasLogo accepts the following props. It does not forward remaining React Native View props.

string

Accepted for icon interchangeability and ignored. Brand gradients are fixed.

string

Accessible name. When set, the mark is an image; when omitted, it is decorative.

number

default:"24"

Rendered width and height in points.

string

Test hook forwarded to the root view.

Concepts & Guidelines

Anvil2

Resources

Atlas Logo - React Native

Common Examples

Accessibility

`AtlasLogo` Props

​Common Examples

​Accessibility

​AtlasLogo Props

Common Examples

Accessibility

`AtlasLogo` Props