Prev

Typography

Next

Logo

Back

Tok.D _ Design System (Beta)


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f20d44ef-2ad8-46b7-bfb3-2956ac6cb718/Untitled.png

Setting - Icons

Icons

Default Size는 정방형 **24px**를 적용합니다.

용도와 활용처에 따라 Icon Size36px, 50px, 100px 등으로 적용 가능합니다.

1)Tab Bar Icons


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8b19a223-09ca-4695-9054-eb12e2dbcedc/_2021-03-12__2.56.39.png

Tab에 따라 On / Off 상태 변화가 표시 가능한 아이콘입니다. Bottom Navigation 등에 활용됩니다.

활성화 된 경우 Primary 컬러의 Filled 상태를 적용합니다.

비활성화의 경우 Gray3, Line 아이콘으로 표시합니다.

2) System Icons


제품의 기능적인 역할을 하는 System Icons을 정의합니다.

DefaultBlackPrimary 컬러를 적용합니다.

State 변경 또는 상황에 따라 Grayscale 컬러 및 Point Color 등을 활용할 수 있습니다.

Basic

Menu, Filter, History 등의 아이콘을 포함하며, 컨텐츠 영역 및 서비스 전반에서 활용 가능합니다.

Navigation - HeaderIcon Header 에도 활용될 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4601811c-6931-4b01-851b-cbbc4d18c3b5/_2021-03-12__3.05.17.png

Arrow Icons

List Align, Page Number, Dropdown Option 등의 다양한 컴포넌트에 활용 가능합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cf8d8d5a-85c4-4c2d-bb81-85cc334ca765/_2021-03-12__3.34.44.png

Check Icons

Gallery Picture Select, List Check Box 등의 컨텐츠에 활용됩니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/62f7a28e-a76a-47df-a0c1-1fadec76a6f9/_2021-03-12__3.34.32.png

Post Icons

좋아요, 북마크, 댓글, 추천 등의 기능을 게시물 및 댓글 컨텐츠에 활용할 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cc091a48-ad8a-4736-abd2-410f2d7052bd/_2021-03-15__3.05.12.png

Login, Alarm, X Icons

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bb13267f-62e5-416e-95ec-076fdc44bf08/_2021-03-12__3.36.49.png

Profile, Ratio, Small System Icons

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/962d5862-4e44-4403-9bc0-9383d3abce1d/_2021-03-12__3.37.28.png

3) Color Icons


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/32fadb50-780d-40d2-b7a8-308271ac4e69/_2021-03-12__3.26.19.png

Button, Card 등의 컴포넌트에 사용하며, 아이콘 내부에 Color Point 요소가 활용됩니다.

Brand Color 색상 조합을 적용합니다.

4) Duotone Icons


Primary - Primary Sub 등의 듀오톤 정책을 사용하는 아이콘을 정의합니다.

상황에 따라 Point - Point Sub 컬러를 활용할 수 있습니다.

ex. Primary 컬러가 Grayscale 색조일 경우, 아이콘은 포인트 요소로 활용되기 때문에 해당 정책을 적용합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/687fffdb-73c0-4853-ac24-c73624c7ecb9/_2021-03-12__3.13.28.png

5) Line Icons


DefaultPrimary 컬러를 적용합니다.

Button 등의 컴포넌트 요소에 활용 가능하며, State 변경 등의 상황에 따라 White 컬러를 활용할 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8a22a7d0-cc0c-4c0c-8337-bccd13a450ec/_2021-03-12__3.18.28.png

6) Gradient Icons


Primary - Primary Sub 컬러를 적용하는 그라디언트 아이콘을 정의합니다.

Button 등의 컴포넌트 요소에 활용 가능하며, 상황에 따라 White - White 60% 컬러를 활용할 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f2e9d285-a43c-44dc-93d9-0d811c24cf53/_2021-03-12__3.28.24.png