Icons

This document covers available Icons.

All icons

API

Props

  • None

Style names

  • activity: callout baloon with three dots inside
  • add-event: calendar silhouette with + sign, add event
  • add-friend: add friend icon
  • add-to-cart: add to cart icon, shopping cart with + sign
  • add-to-favorites: add to favorites (star), outline only
  • add-to-favorites-full: add to favorites (star) icon (full)
  • address-full: map pin (full)
  • back: back arrow icon
  • call: phone silhouette
  • cart: shopping cart icon
  • close: close (X) icon
  • comment: comment / callout baloon icon (outline)
  • comment-full: comment / callout baloon icon (full)
  • down-arrow: down arrow
  • drop-down: drop down / caret icon
  • edit: edit / pencil icon
  • email: email / envelope / letter icon
  • error: error icon (exclamation mark in circle)
  • facebook: Facebook icon
  • feed_wall: feed wall message icon
  • friends: two person silhouette, one next to other
  • ic_about: about (i) icon
  • ic_bell: bell icon
  • ic_books: book icon
  • ic_deals: deals / discount icon
  • ic_events: events / calendar icon
  • ic_exit_to_app: exit / exit to app icon
  • ic_folder: folder icon
  • ic_more_horiz: three horizontal dots (more) icon
  • ic_music_video: music / video play button icon
  • ic_people: two person silhouette, one behind second
  • ic_photo: image silhouette
  • ic_podcasts: music note icon with additional text
  • ic_products: product tag icon
  • ic_radio: music note icon
  • ic_restaurant: spoon and knife crossed icon
  • ic_restaurant_menu: person reading book / menu icon
  • ic_user_profile: user profile / user silhouette icon
  • laptop: laptop / notebook icon
  • left-arrow: left-arrow
  • like: like icon (hand)
  • linkedin-outline: LinkedIn logo (outline only)
  • linkedin: LinkedIn logo (filled)
  • news: news icon
  • pause: pause icon
  • photo: camera icon
  • pin: map pin (similar to address icon, outline only)
  • play: play icon
  • refresh: self-closing arrow
  • right-arrow: right arrow
  • search: magnifiying glass icon
  • settings: gear icon
  • share: share icon
  • share-android: android-specific share icon
  • sidebar: sandwich / hamburger icon often used for slide-in menu
  • tweet: Twitter / Tweet icon
  • unfriend: unfriend icon
  • up-arrow: up arrow icon
  • web: globe icon

Examples

Activity

Activity icon example

JSX Declaration

<Icon name="activity" />

Add event

Add event icon example

JSX Declaration

<Icon name="add-event" />

Add friend

Add friend icon example

JSX Declaration

<Icon name="add-friend" />

Add to cart

Add to cart icon example

JSX Declaration

<Icon name="add-to-cart" />

Add to favorites (full)

Add to favorites (full) icon example

JSX Declaration

<Icon name="add-to-favorites-full" />

Add to favorites (outline)

Add to favorites (outline) icon example

JSX Declaration

<Icon name="add-to-favorites" />

Address (full)

Address (full) icon example

JSX Declaration

<Icon name="address-full" />

Back

Back icon example

JSX Declaration

<Icon name="back" />

Call

Call icon example

JSX Declaration

<Icon name="call" />

Cart

Cart icon example

JSX Declaration

<Icon name="cart" />

Close

Close icon example

JSX Declaration

<Icon name="close" />

Comment (full)

Comment (full) icon example

JSX Declaration

<Icon name="comment-full" />

Comment (outline)

Comment (outline) icon example

JSX Declaration

<Icon name="comment" />

Down arrow

Down arrow icon example

JSX Declaration

<Icon name="down-arrow" />

Drop down icon example

JSX Declaration

<Icon name="drop-down" />

Edit

Edit icon example

JSX Declaration

<Icon name="edit" />

Email

Email icon example

JSX Declaration

<Icon name="email" />

Error

Error icon example

JSX Declaration

<Icon name="error" />

Facebook

Facebook icon example

JSX Declaration

<Icon name="facebook" />

Feed wall

Feed wall icon example

JSX Declaration

<Icon name="feed_wall" />

Friends

Friends icon example

JSX Declaration

<Icon name="friends" />

Inactive (muted) About

Inactive (muted) About icon example

JSX Declaration

<Icon name="ic_about" />

Inactive (muted) Bell

Inactive (muted) Bell icon example

JSX Declaration

<Icon name="ic_bell" />

Inactive (muted) Books

Inactive (muted) Books icon example

JSX Declaration

<Icon name="ic_books" />

Inactive (muted) Deals

Inactive (muted) Deals icon example

JSX Declaration

<Icon name="ic_deals" />

Inactive (muted) Events

Inactive (muted) Events icon example

JSX Declaration

<Icon name="ic_events" />

Inactive (muted) Exit to app

Inactive (muted) Exit to app icon example

JSX Declaration

<Icon name="ic_exit_to_app" />

Inactive (muted) Folder

Inactive (muted) Folder icon example

JSX Declaration

<Icon name="ic_folder" />

Inactive (muted) More (horizontal)

Inactive (muted) More (horizontal) icon example

JSX Declaration

<Icon name="ic_more_horiz" />

Inactive (muted) Music, Video

Inactive (muted) Music, Video icon example

JSX Declaration

<Icon name="ic_music_video" />

Inactive (muted) People

Inactive (muted) People icon example

JSX Declaration

<Icon name="ic_people" />

Inactive (muted) Photo

Inactive (muted) Photo icon example

JSX Declaration

<Icon name="ic_photo" />

Inactive (muted) Podcasts

Inactive (muted) Podcasts icon example

JSX Declaration

<Icon name="ic_podcasts" />

Inactive (muted) Products

Inactive (muted) Products icon example

JSX Declaration

<Icon name="ic_products" />

Inactive (muted) Radio

Inactive (muted) Radio icon example

JSX Declaration

<Icon name="ic_radio" />

Inactive (muted) Restaurant Menu

Inactive (muted) Restaurant Menu icon example

JSX Declaration

<Icon name="ic_restaurant_menu" />

Inactive (muted) Resturant

Inactive (muted) Resturant icon example

JSX Declaration

<Icon name="ic_resturant" />

Inactive (muted) User profile

Inactive (muted) User profile icon example

JSX Declaration

<Icon name="ic_user_profile" />

Laptop

Laptop icon example

JSX Declaration

<Icon name="laptop" />

Left arrow

Left arrow icon example

JSX Declaration

<Icon name="left-arrow" />

Like

Like icon example

JSX Declaration

<Icon name="like" />

LinkedIn (outline)

LinkedIn (outline) icon example

JSX Declaration

<Icon name="linkedin-outline" />

LinkedIn (full)

LinkedIn (full) icon example

JSX Declaration

<Icon name="linkedin" />

News

News icon example

JSX Declaration

<Icon name="news" />

Pause

Pause icon example

JSX Declaration

<Icon name="pause" />

Photo

Photo icon example

JSX Declaration

<Icon name="photo" />

Pin

Pin icon example

JSX Declaration

<Icon name="pin" />

Play

Play icon example

JSX Declaration

<Icon name="play" />

Refresh

Refresh icon example

JSX Declaration

<Icon name="refresh" />

Right arrow

Right arrow icon example

JSX Declaration

<Icon name="right-arrow" />

Search icon example

JSX Declaration

<Icon name="search" />

Settings

Settings icon example

JSX Declaration

<Icon name="settings" />

Share (android)

Share (android) icon example

JSX Declaration

<Icon name="share-android" />

Share

Share icon example

JSX Declaration

<Icon name="share" />

Sidebar icon example

JSX Declaration

<Icon name="sidebar" />

Tweet

Tweet icon example

JSX Declaration

<Icon name="tweet" />

Unfriend

Unfriend icon example

JSX Declaration

<Icon name="unfriend" />

Up arrow

Up arrow icon example

JSX Declaration

<Icon name="up-arrow" />

Web

Web icon example

JSX Declaration

<Icon name="web" />