Skip to main content
Skip table of contents

Web - Icon

Definition

정의

Icon

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

Principle

아이콘에 대한 원칙은 아이콘 원칙 문서 참조

Spec

line이 없고 fill만 있는 경우, fill 형태를 line에도 부여합니다.

Size

기본 아이콘 사이즈는 24px 이며, 상황에 따라 12px, 16px, 20px, 24px, 32px, 48px, 56px, 72px을 사용합니다.

사이즈(px)

12

16

20

24

32

48

56

64

72

Properties

size

크기를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

24

Enum Values Description

24

CODE 
{
width:24px;
height:24px;
}

12

CODE 
{
width:12px;
height:12px;
}

16

CODE 
{
width:16px;
height:16px;
}

20

CODE 
{
width:20px;
height:20px;
}

32

CODE 
{
width:32px;
height:32px;
}

48

CODE 
{
width:48px;
height:48px;
}

56

CODE 
{
width:56px;
height:56px;
}

64

CODE 
{
width:64px;
height:64px;
}

72

CODE 
{
width:72px;
height:72px;
}

 

colorKey

컬러 값을 넣습니다. (ui_로 정의된 컬러값)

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'ui_cpnt_icon_sys_grey_01'

Enum Values Description

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

fillType

line과 fill Type을 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'line'

Enum Values Description

'line'

line 형태의 아이콘을 사용합니다.

'fill'

fill 형태의 아이콘을 사용합니다.

 

iconName

ic_x로 정의 되어 있습니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'ic_unavailable'

Enum Values Description

'ic_unavailable'

line

'ic_arrow_down'

line

'ic_arrow_down_bold'

line

'ic_arrow_left_2'

line

'ic_arrow_left'

line

'ic_arrow_left_bold'

line

'ic_arrow_left_thin'

Added in 1.3.1

line *size가 48 이상인 경우에서만 사용할 것

'ic_arrow_right_2'

line

'ic_arrow_right'

line

'ic_arrow_right_bold'

line

'ic_arrow_right_thin'

Added in 1.3.1

line *size가 48 이상인 경우에서만 사용할 것

'ic_arrow_up'

line

'ic_arrow_up_bold'

line

'ic_bell'

line, fill

'ic_bell_notification'

line

'ic_booking'

line

'ic_booking_completed'

line

'ic_booking_history'

line

'ic_booking_papp'

line

'ic_booking_ticket'

line

'ic_business'

line

'ic_call'

line, fill

'ic_call_end'

fill

'ic_camera'

line, fill

'ic_channel'

line

'ic_channel_setting'

line

'ic_chat'

line, fill

'ic_chat_counseling'

line, fill

'ic_chat_crm'

line, fill

'ic_check'

line

'ic_checkbox_indeterminate'

fill

'ic_checkbox_off'

line

'ic_checkbox_on'

fill

'ic_cloud_download'

fill

'ic_contwatching'

line

*사이즈는 바꿀 수 없고, 컬러만 변경 가능

'ic_copy'

line

'ic_cs'

line

'ic_dashboard'

line

'ic_design_preference'

Added in 1.3.1

line

'ic_delete'

fill

'ic_developer'

line

'ic_download'

Added in 1.3.1

line

'ic_downloaded'

fill

'ic_edit'

line, fill

'ic_editor'

line

'ic_end'

line

'ic_error'

line

'ic_eye'

line, fill

'ic_eye_close'

line, fill

'ic_face'

fill

'ic_filter'

line

'ic_folder'

Added in 1.3.1

line

'ic_heart'

fill

'ic_help_window'

fill

'ic_information'

line

'ic_language'

line

'ic_links'

line

'ic_live'

line, fill

'ic_live_broadcast'

line

'ic_live_commerce'

line

'ic_live_concert'

line

'ic_live_event'

line

'ic_live_personal'

line

'ic_lock'

Added in 1.2.2

line

'ic_login'

fill

'ic_menu'

line

'ic_mic_off'

line

'ic_mic_on'

line, fill

'ic_minus_circle'

Added in 1.3.1

line

'ic_more'

fill

'ic_open_page'

line

'ic_page_size_expand'

line

'ic_page_size_reduce'

line

'ic_paper_plane'

fill

'ic_papp'

line

'ic_papp_type'

Added in 1.3.1

line

'ic_payment'

line

'ic_payment_gift'

line

'ic_payment_onetime'

line

'ic_payment_regularly'

line

'ic_payment_setting'

line

'ic_photo'

line, fill

'ic_pin'

fill

'ic_plan'

line

'ic_plus'

line

'ic_plus_circle'

line

'ic_post_blog'

line

'ic_post_community_p'

line

'ic_post_free'

line, fill

'ic_post_inquiry'

Added in 1.2.2

line

'ic_post_magazine'

line

'ic_post_notice'

line, fill

'ic_post_photobook'

line

'ic_post_promotion'

line

'ic_post_promotion_p'

line

'ic_post_social'

line, fill

'ic_post_vote'

Added in 1.3.0

line

'ic_post_welcome'

Added in 1.2.2

line

'ic_profit'

line

'ic_qr'

line

'ic_question'

Added in 1.3.1

line

'ic_radio_off'

line

'ic_radio_on'

line

'ic_reply'

fill

'ic_report'

line

'ic_search'

line

'ic_seller_info'

line

'ic_seller_intro'

line

'ic_seller_page'

line

'ic_series'

line

'ic_serieslist'

line

*사이즈는 바꿀 수 없고, 컬러만 변경 가능

'ic_setting'

line

'ic_share'

line

'ic_slidebanner'

line

*사이즈는 바꿀 수 없고, 컬러만 변경 가능

'ic_sort'

line

'ic_speaker_off'

line, fill

'ic_speaker_wave_1'

line, fill

'ic_speaker_wave_2'

line, fill

'ic_split_screen'

fill

'ic_standardbanner'

line

*사이즈는 바꿀 수 없고, 컬러만 변경 가능

'ic_star'

fill

'ic_subscribers'

line

'ic_success'

line

'ic_thumb_down'

fill

'ic_thumb_up'

fill

'ic_time'

line

'ic_toggle_down'

line

'ic_toggle_up'

line

'ic_trashcan'

line

'ic_upload'

line

'ic_verified'

fill

'ic_video'

line, fill

'ic_video_episodes'

fill

'ic_video_off'

line, fill

'ic_video_pause'

fill

'ic_video_pip'

line

'ic_video_play'

line, fill

'ic_video_play_circle'

line, fill

'ic_video_playback_speed'

line

'ic_video_playlist'

line

'ic_video_resolution'

fill

'ic_video_subtitle'

fill

'ic_videocall'

line, fill

'ic_videocall_pro'

line, fill

'ic_vod'

line

'ic_vodclass'

line

'ic_vodplus'

line, fill

'ic_vods'

line

'ic_warning'

line

'ic_weblink'

line

'ic_xmark'

line

 

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

  • 2022/04/28 : 아이콘 추가(minus_circle, papp_type, design_preference, arrow_left_thin, arrow_right_thin, folder, download) - 김혜진

  • 2022/04/21 : 아이콘 추가 (question) - 김혜진

  • 2022/04/12 : 아이콘 추가 (vote) - 김혜진

  • 2022/03/24 : Property 기술방법 변경 - 안은수

  • 2022/02/25 : 개발 코드 배포여부 추가 - 안은수

  • 2022/02/25 : Property 기술방법 변경, 아이콘 추가 - 김혜진

  • 2022/01/26 : iconName이 없을 경우나 colorKey가 없을 경우에 대해 default value 부여 - 김혜진

  • 2021/12/23 : 아이콘 업데이트, 사이즈 추가 - 김혜진

  • 2021/12/08 : 아이콘 추가(plus_circle, end, eye_close) - 김혜진

  • 2021/11/23 : 64 사이즈 추가 - 김혜진

  • 2021/11/15 : 아이콘 종류 전체 검수 및 전달, 아이콘 원칙 문서 분리 - 김혜진

  • 2021/11/11 : 아이콘 전체 검토, 추가 - 김혜진

  • 2021/11/08 : 추가아이콘(error, playlist, login, menu), 수정(warning) - 김혜진

  • 2021/11/02 : warning 아이콘 수정, information 아이콘 추가 - 김혜진

  • 2021/09/11 : property, value 정리 - 박윤규

  • 2021/08/30 : 아이콘 내용 정리 및 추가 - 김혜진

  • 2021/08/27 : 아이콘 원칙 추가 - 김혜원

  • 2021/08/13 : 문서 작성방식 변경 - 박윤규

  • 2021/05/26 : 아이콘 정리(제플린 기준) - 김혜진

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close