UI Pattern and Guidelines
  • User interface pattern guidelines
  • Foundations
    • Accessibility
    • States
    • Colours
    • Typography
    • Grid and layout
    • Icons
    • Data Visualisation
  • Components
    • Avatar
    • Badge
    • Breadcrumb
    • Button group / Select button
    • Button
    • Card
    • Checkbox
    • Contained button
    • Container
    • Counter
    • Divider
    • Empty state
    • Error page
    • Form Fields
    • Footer
    • Icons
    • Legal
    • Link
    • Lists
    • Loader
    • Modal
    • Navigation
    • Notification
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Scroll bar
    • Slider
    • Status
    • Switch
    • Table
    • Tabs
    • Tag
    • Titles
    • Tooltip
    • Uploader
Powered by GitBook
On this page
  • Usage
  • Best Practices

Was this helpful?

  1. Components

Icons

PreviousFooterNextLegal

Last updated 4 years ago

Was this helpful?

Usage

Icons are used to visually communicate available actions inside applications. Using icons can be a great help to users who have difficulties with reading, language, attention, and low vision, but it’s always recommended to pair text and icons for better clarity.

Icons can be used inside components on the user interface in three predefined sizes:

Best Practices

  • If the icon appears without text, then use the accessibility attribute or a tooltip to give the icon a text alternative

  • Do not use text to describe what the icon looks like, text should be used to describe intended action.

  • Avoid duplication, don’t use the same icon for different things. Like the trash can empty or full this is known for deletion.

For more specific use, any icon from the Feather icons set () can be used.

https://feathericons.com/