diff --git a/components/weapon/WeaponLabelIcon/index.module.scss b/components/weapon/WeaponLabelIcon/index.module.scss
index 6ea874ab..1def7a3a 100644
--- a/components/weapon/WeaponLabelIcon/index.module.scss
+++ b/components/weapon/WeaponLabelIcon/index.module.scss
@@ -1,4 +1,4 @@
-.WeaponLabelIcon {
+.icon {
   display: inline-block;
   background-size: 60px 25px;
   height: 25px;
diff --git a/components/weapon/WeaponLabelIcon/index.tsx b/components/weapon/WeaponLabelIcon/index.tsx
index c4bb9b17..84318877 100644
--- a/components/weapon/WeaponLabelIcon/index.tsx
+++ b/components/weapon/WeaponLabelIcon/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useRouter } from 'next/router'
+import classNames from 'classnames'
 
 import styles from './index.module.scss'
 
@@ -10,7 +11,14 @@ interface Props {
 const WeaponLabelIcon = (props: Props) => {
   const router = useRouter()
 
-  return <i className={`WeaponLabelIcon ${props.labelType} ${router.locale}`} />
+  const classes = classNames({
+    [styles.icon]: true,
+    [styles[props.labelType]]: true,
+    [styles.en]: router.locale === 'en',
+    [styles.ja]: router.locale === 'ja',
+  })
+
+  return <i className={classes} />
 }
 
 export default WeaponLabelIcon