Logo Demo

Interactive demo to explore different logo configurations and options.

Logo Type
Choose between SVG and HTML implementations
Shape
Choose the logo shape
Size & Elements
Adjust size and toggle elements

Size

Elements

Logo Preview
Current configuration preview
SVX
Component Library
Usage Code
Copy this code to use the logo in your project
<SVXSvgLogo
  type="circle"
  size="md"
  name="SVX"
  strapline="Component Library"
  icon={<Settings size={24} color="white" />}
  isHomepageLogo={true}
/>

Logo Implementation Examples

This section demonstrates both SVG and HTML logo implementations with mode switching.

Current Logo Mode: SVG
The header logo and examples below will update when you change the mode

SVG Logo

SVX
Component Library

SVG implementation with proper accessibility attributes and semantic structure.

HTML Logo

SVX
Component Library

HTML implementation with proper accessibility and semantic structure.

Logo Variants
Different shapes and sizes for both logo types

Circle Shape

SVX
Circle

Square Shape

SVX
Square

Rounded Shape

SVX
Rounded