Icons
some engaging summary
In React implementation is required use
IconsProvider around Icon component.import { IconsProvider, Icon } from '@seduo/design-system';
...
<IconsProvider>
<Icon name="warning" />
Hey! Pay attention!
</IconsProvider>Icons Set
API
| Prop name | Type | Required | Description |
|---|---|---|---|
| name | string |
yes | its possible to use all icons |
| color | Icon Color dictionary | no | possible colors for icon |
| size | Icon Size dictionary | no | possible sizes for icon |
| title | string |
no | specifies the title on icon hover |
| class | string |
no | property to extend with custom classes (className in react) |
Example
import { Icon } from "@seduo/design-system";
...
<Icon name="alert-triangle-filled" />
...
<Icon name="alert-triangle" />
...
<Icon name="apple" />
...
<Icon name="arrow-down" />
...
<Icon name="arrow-left" />
...
<Icon name="arrow-right" />
...
<Icon name="arrow-up-bold-filled" />
...
<Icon name="arrow-up-bold" />
...
<Icon name="arrow-up" />
...
<Icon name="attachment" />
...
<Icon name="bookmark-filled" />
...
<Icon name="bookmark" />
...
<Icon name="box-arrow-down" />
...
<Icon name="box-arrow-up" />
...
<Icon name="box-arrowd-down-filled" />
...
<Icon name="box-arrowd-up-filled" />
...
<Icon name="box-filled" />
...
<Icon name="box" />
...
<Icon name="briefcase" />
...
<Icon name="building-filled" />
...
<Icon name="building" />
...
<Icon name="business" />
...
<Icon name="calendar" />
...
<Icon name="camera-filled" />
...
<Icon name="camera" />
...
<Icon name="categories-filled" />
...
<Icon name="categories" />
...
<Icon name="certificate-2" />
...
<Icon name="certificate" />
...
<Icon name="check-circle-filled" />
...
<Icon name="check-circle" />
...
<Icon name="check-square-checked" />
...
<Icon name="check-square-close" />
...
<Icon name="check-square-intermediate" />
...
<Icon name="check-square-unchecked" />
...
<Icon name="check" />
...
<Icon name="chevron-down" />
...
<Icon name="chevron-left" />
...
<Icon name="chevron-right" />
...
<Icon name="chevron-up" />
...
<Icon name="clock-filled" />
...
<Icon name="clock" />
...
<Icon name="close-circle-filled" />
...
<Icon name="close-circle" />
...
<Icon name="close" />
...
<Icon name="cloud" />
...
<Icon name="communication" />
...
<Icon name="display-graph" />
...
<Icon name="display" />
...
<Icon name="dots-horizontal" />
...
<Icon name="dots-vertical" />
...
<Icon name="download-2" />
...
<Icon name="download-package-filled" />
...
<Icon name="download-package" />
...
<Icon name="download" />
...
<Icon name="edit-2-filled" />
...
<Icon name="edit-2" />
...
<Icon name="edit" />
...
<Icon name="emotion-happy" />
...
<Icon name="emotion-meh" />
...
<Icon name="emotion-sad" />
...
<Icon name="envelope-open" />
...
<Icon name="envelope" />
...
<Icon name="expand" />
...
<Icon name="feather" />
...
<Icon name="filters-horizontal" />
...
<Icon name="finance" />
...
<Icon name="fire-filled" />
...
<Icon name="fire" />
...
<Icon name="flash-filled" />
...
<Icon name="flash" />
...
<Icon name="follow-filled" />
...
<Icon name="follow" />
...
<Icon name="following-course" />
...
<Icon name="forward-filled" />
...
<Icon name="forward" />
...
<Icon name="fullscreen-off" />
...
<Icon name="fullscreen-on" />
...
<Icon name="google" />
...
<Icon name="graduation-cap-filled" />
...
<Icon name="graduation-cap" />
...
<Icon name="headphones-filled" />
...
<Icon name="headphones" />
...
<Icon name="heart-filled" />
...
<Icon name="heart" />
...
<Icon name="help-filled" />
...
<Icon name="help" />
...
<Icon name="history" />
...
<Icon name="home-filled" />
...
<Icon name="home" />
...
<Icon name="hr-law" />
...
<Icon name="info-filled" />
...
<Icon name="info" />
...
<Icon name="languages" />
...
<Icon name="law-filled" />
...
<Icon name="law" />
...
<Icon name="layers-filled" />
...
<Icon name="layers" />
...
<Icon name="leadership" />
...
<Icon name="lightbulb" />
...
<Icon name="like-filled" />
...
<Icon name="like" />
...
<Icon name="link-external" />
...
<Icon name="list-category" />
...
<Icon name="list-filled" />
...
<Icon name="list" />
...
<Icon name="lock-filled" />
...
<Icon name="lock" />
...
<Icon name="log-out" />
...
<Icon name="long-arrow-down" />
...
<Icon name="long-arrow-left" />
...
<Icon name="long-arrow-right" />
...
<Icon name="long-arrow-up" />
...
<Icon name="marketing-filled" />
...
<Icon name="marketing" />
...
<Icon name="menu-burger" />
...
<Icon name="microphone-off-filled" />
...
<Icon name="microphone-off" />
...
<Icon name="microphone-on-filled" />
...
<Icon name="microphone-on" />
...
<Icon name="mobile-phone" />
...
<Icon name="next-filled" />
...
<Icon name="next" />
...
<Icon name="not-found" />
...
<Icon name="notes" />
...
<Icon name="notifications-off-filled" />
...
<Icon name="notifications-off" />
...
<Icon name="notifications-on-filled" />
...
<Icon name="notifications-on" />
...
<Icon name="onboarding" />
...
<Icon name="outlook" />
...
<Icon name="paper-plane" />
...
<Icon name="pause-filled" />
...
<Icon name="pause" />
...
<Icon name="people-filled" />
...
<Icon name="people" />
...
<Icon name="personal-growth" />
...
<Icon name="phone" />
...
<Icon name="photo-add" />
...
<Icon name="photo" />
...
<Icon name="play-circle-filled" />
...
<Icon name="play-circle" />
...
<Icon name="play-filled" />
...
<Icon name="play" />
...
<Icon name="plus-circle-filled" />
...
<Icon name="plus-circle" />
...
<Icon name="plus" />
...
<Icon name="power" />
...
<Icon name="presentation" />
...
<Icon name="previous-filled" />
...
<Icon name="previous" />
...
<Icon name="productivity" />
...
<Icon name="projects" />
...
<Icon name="radio-checked" />
...
<Icon name="radio-unchecked" />
...
<Icon name="reload" />
...
<Icon name="remove-circle-filled" />
...
<Icon name="remove-circle" />
...
<Icon name="sales" />
...
<Icon name="search-filled" />
...
<Icon name="search" />
...
<Icon name="seduo" />
...
<Icon name="settings-filled" />
...
<Icon name="settings" />
...
<Icon name="share-filled" />
...
<Icon name="share" />
...
<Icon name="social-facebook" />
...
<Icon name="social-instagram" />
...
<Icon name="social-linkedin" />
...
<Icon name="social-twitter" />
...
<Icon name="social-youtube" />
...
<Icon name="software" />
...
<Icon name="sparkles-filled" />
...
<Icon name="speaker-low-filled" />
...
<Icon name="speaker-low" />
...
<Icon name="speaker-off-2-filled" />
...
<Icon name="speaker-off-2" />
...
<Icon name="speaker-off-filled" />
...
<Icon name="speaker-off" />
...
<Icon name="speaker-on-filled" />
...
<Icon name="speaker-on" />
...
<Icon name="spinner" />
...
<Icon name="star-filled" />
...
<Icon name="star" />
...
<Icon name="stats-circle" />
...
<Icon name="stats" />
...
<Icon name="stop" />
...
<Icon name="subtitles-2-filled" />
...
<Icon name="subtitles-2" />
...
<Icon name="subtitles-filled" />
...
<Icon name="subtitles" />
...
<Icon name="tag-filled" />
...
<Icon name="tag" />
...
<Icon name="trash-filled" />
...
<Icon name="trash" />
...
<Icon name="trophy-filled" />
...
<Icon name="trophy" />
...
<Icon name="unlimited" />
...
<Icon name="user-filled" />
...
<Icon name="user" />
...
<Icon name="vip-filled" />
...
<Icon name="vip" />
...
<Icon name="visibility-off" />
...
<Icon name="visibility-on" />
...
<Icon name="webcam" />
...
<Icon name="wellbeing" />
...
<Icon name="windows-filled" />
...
<Icon name="windows" /><Icon name="alert-triangle-filled" />
...
<Icon name="alert-triangle" />
...
<Icon name="apple" />
...
<Icon name="arrow-down" />
...
<Icon name="arrow-left" />
...
<Icon name="arrow-right" />
...
<Icon name="arrow-up-bold-filled" />
...
<Icon name="arrow-up-bold" />
...
<Icon name="arrow-up" />
...
<Icon name="attachment" />
...
<Icon name="bookmark-filled" />
...
<Icon name="bookmark" />
...
<Icon name="box-arrow-down" />
...
<Icon name="box-arrow-up" />
...
<Icon name="box-arrowd-down-filled" />
...
<Icon name="box-arrowd-up-filled" />
...
<Icon name="box-filled" />
...
<Icon name="box" />
...
<Icon name="briefcase" />
...
<Icon name="building-filled" />
...
<Icon name="building" />
...
<Icon name="business" />
...
<Icon name="calendar" />
...
<Icon name="camera-filled" />
...
<Icon name="camera" />
...
<Icon name="categories-filled" />
...
<Icon name="categories" />
...
<Icon name="certificate-2" />
...
<Icon name="certificate" />
...
<Icon name="check-circle-filled" />
...
<Icon name="check-circle" />
...
<Icon name="check-square-checked" />
...
<Icon name="check-square-close" />
...
<Icon name="check-square-intermediate" />
...
<Icon name="check-square-unchecked" />
...
<Icon name="check" />
...
<Icon name="chevron-down" />
...
<Icon name="chevron-left" />
...
<Icon name="chevron-right" />
...
<Icon name="chevron-up" />
...
<Icon name="clock-filled" />
...
<Icon name="clock" />
...
<Icon name="close-circle-filled" />
...
<Icon name="close-circle" />
...
<Icon name="close" />
...
<Icon name="cloud" />
...
<Icon name="communication" />
...
<Icon name="display-graph" />
...
<Icon name="display" />
...
<Icon name="dots-horizontal" />
...
<Icon name="dots-vertical" />
...
<Icon name="download-2" />
...
<Icon name="download-package-filled" />
...
<Icon name="download-package" />
...
<Icon name="download" />
...
<Icon name="edit-2-filled" />
...
<Icon name="edit-2" />
...
<Icon name="edit" />
...
<Icon name="emotion-happy" />
...
<Icon name="emotion-meh" />
...
<Icon name="emotion-sad" />
...
<Icon name="envelope-open" />
...
<Icon name="envelope" />
...
<Icon name="expand" />
...
<Icon name="feather" />
...
<Icon name="filters-horizontal" />
...
<Icon name="finance" />
...
<Icon name="fire-filled" />
...
<Icon name="fire" />
...
<Icon name="flash-filled" />
...
<Icon name="flash" />
...
<Icon name="follow-filled" />
...
<Icon name="follow" />
...
<Icon name="following-course" />
...
<Icon name="forward-filled" />
...
<Icon name="forward" />
...
<Icon name="fullscreen-off" />
...
<Icon name="fullscreen-on" />
...
<Icon name="google" />
...
<Icon name="graduation-cap-filled" />
...
<Icon name="graduation-cap" />
...
<Icon name="headphones-filled" />
...
<Icon name="headphones" />
...
<Icon name="heart-filled" />
...
<Icon name="heart" />
...
<Icon name="help-filled" />
...
<Icon name="help" />
...
<Icon name="history" />
...
<Icon name="home-filled" />
...
<Icon name="home" />
...
<Icon name="hr-law" />
...
<Icon name="info-filled" />
...
<Icon name="info" />
...
<Icon name="languages" />
...
<Icon name="law-filled" />
...
<Icon name="law" />
...
<Icon name="layers-filled" />
...
<Icon name="layers" />
...
<Icon name="leadership" />
...
<Icon name="lightbulb" />
...
<Icon name="like-filled" />
...
<Icon name="like" />
...
<Icon name="link-external" />
...
<Icon name="list-category" />
...
<Icon name="list-filled" />
...
<Icon name="list" />
...
<Icon name="lock-filled" />
...
<Icon name="lock" />
...
<Icon name="log-out" />
...
<Icon name="long-arrow-down" />
...
<Icon name="long-arrow-left" />
...
<Icon name="long-arrow-right" />
...
<Icon name="long-arrow-up" />
...
<Icon name="marketing-filled" />
...
<Icon name="marketing" />
...
<Icon name="menu-burger" />
...
<Icon name="microphone-off-filled" />
...
<Icon name="microphone-off" />
...
<Icon name="microphone-on-filled" />
...
<Icon name="microphone-on" />
...
<Icon name="mobile-phone" />
...
<Icon name="next-filled" />
...
<Icon name="next" />
...
<Icon name="not-found" />
...
<Icon name="notes" />
...
<Icon name="notifications-off-filled" />
...
<Icon name="notifications-off" />
...
<Icon name="notifications-on-filled" />
...
<Icon name="notifications-on" />
...
<Icon name="onboarding" />
...
<Icon name="outlook" />
...
<Icon name="paper-plane" />
...
<Icon name="pause-filled" />
...
<Icon name="pause" />
...
<Icon name="people-filled" />
...
<Icon name="people" />
...
<Icon name="personal-growth" />
...
<Icon name="phone" />
...
<Icon name="photo-add" />
...
<Icon name="photo" />
...
<Icon name="play-circle-filled" />
...
<Icon name="play-circle" />
...
<Icon name="play-filled" />
...
<Icon name="play" />
...
<Icon name="plus-circle-filled" />
...
<Icon name="plus-circle" />
...
<Icon name="plus" />
...
<Icon name="power" />
...
<Icon name="presentation" />
...
<Icon name="previous-filled" />
...
<Icon name="previous" />
...
<Icon name="productivity" />
...
<Icon name="projects" />
...
<Icon name="radio-checked" />
...
<Icon name="radio-unchecked" />
...
<Icon name="reload" />
...
<Icon name="remove-circle-filled" />
...
<Icon name="remove-circle" />
...
<Icon name="sales" />
...
<Icon name="search-filled" />
...
<Icon name="search" />
...
<Icon name="seduo" />
...
<Icon name="settings-filled" />
...
<Icon name="settings" />
...
<Icon name="share-filled" />
...
<Icon name="share" />
...
<Icon name="social-facebook" />
...
<Icon name="social-instagram" />
...
<Icon name="social-linkedin" />
...
<Icon name="social-twitter" />
...
<Icon name="social-youtube" />
...
<Icon name="software" />
...
<Icon name="sparkles-filled" />
...
<Icon name="speaker-low-filled" />
...
<Icon name="speaker-low" />
...
<Icon name="speaker-off-2-filled" />
...
<Icon name="speaker-off-2" />
...
<Icon name="speaker-off-filled" />
...
<Icon name="speaker-off" />
...
<Icon name="speaker-on-filled" />
...
<Icon name="speaker-on" />
...
<Icon name="spinner" />
...
<Icon name="star-filled" />
...
<Icon name="star" />
...
<Icon name="stats-circle" />
...
<Icon name="stats" />
...
<Icon name="stop" />
...
<Icon name="subtitles-2-filled" />
...
<Icon name="subtitles-2" />
...
<Icon name="subtitles-filled" />
...
<Icon name="subtitles" />
...
<Icon name="tag-filled" />
...
<Icon name="tag" />
...
<Icon name="trash-filled" />
...
<Icon name="trash" />
...
<Icon name="trophy-filled" />
...
<Icon name="trophy" />
...
<Icon name="unlimited" />
...
<Icon name="user-filled" />
...
<Icon name="user" />
...
<Icon name="vip-filled" />
...
<Icon name="vip" />
...
<Icon name="visibility-off" />
...
<Icon name="visibility-on" />
...
<Icon name="webcam" />
...
<Icon name="wellbeing" />
...
<Icon name="windows-filled" />
...
<Icon name="windows" />Colors
Icons can be colored by inheriting the text color of the wrapping element. However, for easier use, the component has a color property with a predefined color palette (Icon Color dictionary).
import { Icon } from "@seduo/design-system";
...
<Icon name="alert-triangle-filled" color="primary" />
...
<Icon name="alert-triangle-filled" color="secondary" />
...
<Icon name="alert-triangle-filled" color="light" />
...
<Icon name="alert-triangle-filled" color="success" />
...
<Icon name="alert-triangle-filled" color="danger" />
...
<Icon name="alert-triangle-filled" color="warning" />
...
<Icon name="alert-triangle-filled" color="informative" />
...
<Icon name="alert-triangle-filled" color="disabled" /><Icon name="alert-triangle-filled" color="primary" />
...
<Icon name="alert-triangle-filled" color="secondary" />
...
<Icon name="alert-triangle-filled" color="light" />
...
<Icon name="alert-triangle-filled" color="success" />
...
<Icon name="alert-triangle-filled" color="danger" />
...
<Icon name="alert-triangle-filled" color="warning" />
...
<Icon name="alert-triangle-filled" color="informative" />
...
<Icon name="alert-triangle-filled" color="disabled" />Sizes
Icons have been designed to work best in sizes below (Icon Size dictionary).
import { Icon } from "@seduo/design-system";
...
<Icon name="alert-triangle-filled" size="small" />
...
<Icon name="alert-triangle-filled" size="medium" />
...
<Icon name="alert-triangle-filled" size="large" />
...
<Icon name="alert-triangle-filled" size="xlarge" />
...
<Icon name="alert-triangle-filled" size="xxlarge" />
...
<Icon name="alert-triangle-filled" size="xxxlarge" /><Icon name="alert-triangle-filled" size="small" />
...
<Icon name="alert-triangle-filled" size="medium" />
...
<Icon name="alert-triangle-filled" size="large" />
...
<Icon name="alert-triangle-filled" size="xlarge" />
...
<Icon name="alert-triangle-filled" size="xxlarge" />
...
<Icon name="alert-triangle-filled" size="xxxlarge" />
On this page