Logos

Full logo

Use ds-icon --icon-soracom-logo to display the Soracom symbol and wordmark together. The logo preserves its wide aspect ratio at every icon size. Use a div with fallback text, or an empty i with an accessible name.

Full logo using div and i elements

html

Copy

Two-color styles

The symbol remains celeste while the wordmark color can respond to the current light or dark theme, or remain fixed.

Modifier	Light mode	Dark mode
None (default)	Dark	Light
`--style-light-dark`	Light	Dark
`--style-light`	Light	Light
`--style-dark`	Dark	Dark

Two-color logo styles

html

Copy

Demo controls

Single color

Apply any standard --color-* modifier to use one color for the entire logo.

Single-color full logo

html

Copy

Symbol

Use --icon-soracom when only the square Soracom symbol is required. Static, play-once, and looping variants are available.

Variants

Static and animated symbol variants

html

Copy

Color

Standard --color-* modifiers work with every symbol variant.

Symbol colors

html

Copy