Brand Assets
Official CruxMD logos, wordmarks, and brand assets. Click the copy button to copy the file path for use in your code.
Wordmarks
Full logo with CruxMD text. Use these for headers and prominent placements.
Primary Wordmark
Use on light backgrounds
/brand/logos/wordmark-primary.svg
Reversed Wordmark
Use on dark backgrounds
/brand/logos/wordmark-reversed.svg
Mono Dark Wordmark
Single color, dark variant
/brand/logos/wordmark-mono-dark.svg
Mono Light Wordmark
Single color, light variant
/brand/logos/wordmark-mono-light.svg
Marks
Icon-only versions for compact spaces like favicons and app icons.
Primary Mark
Use on light backgrounds
/brand/logos/mark-primary.svg
Reversed Mark
Use on dark backgrounds
/brand/logos/mark-reversed.svg
Mono Dark Mark
Single color, dark variant
/brand/logos/mark-mono-dark.svg
Mono Light Mark
Single color, light variant
/brand/logos/mark-mono-light.svg
Animated Spinner
Lottie animation for loading states and thinking indicators. Works on both light and dark backgrounds.
Light Background
Dark Background
File Formats
The spinner is available in two Lottie formats. Both contain the same animation and work on any background.
/brand/animations/crux-spin.jsonJSON format. Human-readable, easy to inspect and modify. Works directly with lottie-react via fetch + JSON parse. Recommended for web.
/brand/animations/crux-spin.lottiedotLottie format. Compressed binary (zip) containing JSON + embedded assets. Smaller file size. Requires @dotlottie/react-player or similar library.
Favicons & App Icons
Icons for browser tabs, bookmarks, and mobile home screens.
SVG Favicon
Scalable vector favicon
/favicon.svg
Apple Touch Icon
180x180 for iOS home screen
/apple-touch-icon.png
PWA Icon 192
192x192 for PWA manifest
/pwa-192x192.png
PWA Icon 512
512x512 for PWA splash
/pwa-512x512.png
Social Media
Open Graph images for link previews on social platforms.
OG Image
1200x630 for Facebook, LinkedIn
/og-image.png
Twitter Card
1200x600 for Twitter/X
/og-image-twitter.png
Usage Guidelines
Clear Space
Maintain a minimum clear space around the logo equal to the height of the "C" in CruxMD.
Minimum Size
Wordmarks should be no smaller than 80px wide. Marks should be no smaller than 24px.
Background Selection
Use primary/mono-dark variants on light backgrounds. Use reversed/mono-light variants on dark backgrounds. Ensure sufficient contrast for accessibility.
Don't
- Stretch or distort the logo
- Change the logo colors outside approved variants
- Add effects like shadows or gradients
- Place on busy or low-contrast backgrounds
Usage in Code
HTML Implementation
Add these tags to your document head for complete favicon and social sharing support.