Logo

Branding

Nosible brand logo — mark, wordmark, and lockups with currentColor recolouring.

Single-component entry point for the full Nosible logo system. Inline SVG paths mean color flows via currentColor — tint the logo by setting color on an ancestor, or pass an explicit color prop.

Four layouts supplied by the illustrator:

mark — the symbol alone (square, arrow-motif).
wordmark — the "NOSIBLE" letterforms.
primary — mark + wordmark side-by-side (default lockup).
stacked — wordmark above, mark below.

Usage

import { Logo } from "nosible-ux"

export default function Example() {
  return <Logo variant="mark" size={48} color="var(--c-neo-green)" />
}

Examples

All variants

Colour via currentColor

Size range

Accessibility

role="img" and aria-label="Nosible" are applied by default.
Pass aria-label="" for purely decorative uses — the SVG is then hidden with aria-hidden.
Mark-only uses should pair with visible wordmark text nearby, or keep the default label.

Asset origin

Source files from the Nosible illustrator live in packages/nosible-ux/src/assets/logos/ as SVG + PNG pairs. The component inlines the path data so no external request is required.

Props

Name	Type	Default	Description
`aria-label`	`string \| undefined`	—	Accessible label. Set to an empty string for purely decorative uses.
`color`	`string \| undefined`	`'currentColor'`	Fill colour. `"currentColor"` tracks the parent's text colour — ideal for single-colour uses on Obsidian, White, or brand-coloured backgrounds.
`size`	`number \| undefined`	`32`	Height of the rendered logo, in pixels. Width is derived from the variant's intrinsic aspect ratio.
`variant`	`LogoVariant \| undefined`	—	Which logo layout to render.

← All Components Getting Started →