LoginSign Icon Usage

Guidelines for using the LoginSign logo and icon in your application. Follow these rules to ensure consistent branding and optimal user experience.

Icon Guidelines

The LoginSign icon is your primary way to indicate "Sign in with LoginSign". Use it on sign-in buttons, authentication screens, and integration surfaces.

Do's

• Use the official icon — Download from our brand assets or use the SVG provided in the integration guide.
• Maintain clear space — Keep at least the height of the icon as empty space around it.
• Scale proportionally — Never stretch or squash the icon; preserve the aspect ratio (approximately 50:47).
• Use sufficient contrast — Ensure the icon is readable on both light and dark backgrounds.
• Place on sign-in surfaces — Use the icon on buttons, headers, and anywhere users initiate LoginSign authentication.

Don'ts

• Don't modify the icon — No rotation, filters, drop shadows, or decorative effects that alter its appearance.
• Don't change colors arbitrarily — Use the primary brand color (blue) in light mode and white in dark mode as shown below.
• Don't use below 24px — Minimum recommended size is 24×24px for legibility.
• Don't combine with other logos — Avoid placing the LoginSign icon inside or overlapping other brand marks.

Light Mode & Dark Mode

Light mode — Use the brand blue (#055491) for the icon on white or light gray backgrounds. Dark mode — Use white (#ffffff) for the icon on dark backgrounds.

Logo preview

Both variants side by side. The logo is always blue in light mode and white in dark mode. In dark mode the light box stays bright so it doesn't irritate.

LoginSign — buttons

Use "LoginSign" as standalone button label. Both variants side by side.