Iconography

Dalawang uri ng icon. Ang mga interface action ay gumagamit ng magagaan na line icon sa Feather style; ang mga brand at social link ay gumagamit ng solid na marks. Parehong kinukuha ang kanilang kulay mula sa text na nakapaligid sa kanila.

Mga line icon

Ang mga interface icon ay iginuguhit sa isang 24-unit na grid na may two-pixel na stroke, round caps at round joins, sa Feather style. Nire-render ang mga ito sa 15 hanggang 20 pixel sa loob ng isang hit area na hindi bababa sa 38, at hindi kailanman may sariling kulay: minamana nila ang currentColor mula sa text.

Ang kumpletong working set: bawat line glyph na ginuguhit ng site at ng docs na ito, sa specimen size. Lahat mula sa parehong 24-unit, 2-stroke na Feather grammar.
Hanapin
Bumalik
Chevron
I-download
RSS
Tsek
Isara
Wika
Dark theme
Light theme
Pause
Play
Palakihin
Reading time
Ibahagi
Kopyahin ang link
Balik sa itaas
Nakaraan
Susunod
Itiklop
Naka-subscribe
Mga petsa
Role
Tawag
Newsletter
Kulay
Typography
Layout
Hugis
Iconography
Motion
Pagsulat
Translation
Accessibility
Tahimik
Editorial
Technical
Hit area · 44 × 44px Glyph · 20px Padding · 12px
Ang hit area, may anotasyon: 20px na glyph na nakagitna sa 44px na parisukat: ang may-guhit na singsing ang tappable na padding.

Mga brand mark

Ang mga social at brand icon ay solid na single-color na marks sa halip na mga line drawing, kaya ang isang nakikilalang logo ay nananatiling nakikilala. Nabubuhay ang mga ito sa footer at minamana ang parehong currentColor, nagiging berde kapag naka-hover. Ito ang tunay na component, na-render dito mula sa parehong source na ginagamit ng footer.

Ang mga live na social mark.

Mga rule

Gawin

Hayaang kunin ng mga icon ang currentColor, upang sumunod ang mga ito sa theme at sa text na nakapaligid sa kanila.

Huwag

I-hard-code ang kulay ng isang icon. Dapat itong sumunod sa text.

Gawin

Panatilihin ang isang 44-pixel na hit area kahit na 16 pixel ang glyph.

Huwag

Paliitin ang mata-tap na area hanggang sa laki ng drawing.

Gawin

Gumamit ng mga line icon para sa mga action at solid na marks para sa mga brand.

Huwag

Paghaluin ang stroke at fill na mga style sa loob ng interface set.