1. Documents
  2. Web API

LINE Login button

The LINE Login button lets your users log in to your app or website using their LINE accounts.

Using the LINE Login button image

The LINE Login button is made up of the following components: the LINE icon, the LINE icon speech balloon, and the LINE Login button text as shown in the image below.

Before using the LINE Login button images, make sure you read and agree to the LINE Login Button Usage Guidelines. By downloading the images, you are deemed to have agreed to the guidelines.

To use the LINE Login button, download the images contained in the archive file below. If you want to change the Login button text with a translation, use the Photoshop Document (PSD) files which are also included in the archive file.

LINE Login button images

Note: The images provided may not be used for any purpose other than as the image for the LINE Login button.

Design specifications

Use the following specifications for the LINE Login button.

Size

You can enlarge or shrink the LINE Login button image according to the device it will be displayed on as long as it complies with the following rules.

  • The aspect ratio of the LINE icon may not be changed.
  • The visibility of the LINE icon in the LINE Login button image may not be compromised.

Colors

Only the following colors can be used for the LINE Login button image.

  • Basic color: #00C300
  • Hover: #00E000
  • Press: #00B300
  • Disabled: #C6C6C6
  • Font color: #FFFFFF

LINE Login button text

It is recommended that you use “Log in with LINE” as the button text. A list of recommended phrases for other languages can be found in the table below.

If you decide to use your own customized button text, make sure to follow these guidelines:

  • There are no line breaks
  • The text makes it clear for the user that the button is for logging in to your service using LINE

You can also use the LINE icon on its own without any button text as the LINE Login button.

Language Login button text (long) Login button text (short)
en Log in with LINE Log In
ja LINEでログイン ログイン
ko LINE으로 로그인 로그인
de Mit LINE anmelden Anmelden
es Iniciar sesión con LINE Iniciar sesión
fr Connexion avec LINE Se connecter
id Masuk dengan LINE Masuk
it Login con LINE Login
ms Log masuk dengan LINE Log Masuk
pt-BR Login com o LINE Login
pt-PT Iniciar sessão com o LINE Iniciar sessão
ru Войти в LINE Войти
th ล็อกอินด้วย LINE ล็อกอิน
tr LINE ile oturum açın Oturum Aç
ar تسجيل دخول باستخدام LINE تسجيل دخول
vi Đăng nhập với LINE Đăng nhập
zh-CN 用LINE帐号登录 登录
zh-TW 與LINE連動 連動

Font

The font of the button text must be readable. Recommended font sizes for each image size are included in the PSD files.

Padding

The width of the right and left padding for the Login button text must be the same as or wider than that of the LINE icon speech balloon. This width is defined as X in the image below.

The recommended width of the top and bottom padding for the Login button text is X/2. Make sure you use a font size that allows for this padding width to be maintained.

Isolation zone

The isolation zone is the space surrounding the LINE Login button which cannot contain any elements. The width of the isolation zone must be the same as or wider than the left padding of the LINE icon speech balloon. The width is defined as “A” in the image below. In addition to maintaining the isolation zone, avoid placing text or graphics near the isolation zone as that could compromise the effectiveness of the LINE Login button.

Common mistakes to avoid

  • Using a non-designated color
  • Using an outdated LINE icon
  • Using a different or modified icon instead of using the LINE icon