### Using icons

Import an icon directly from glyphs:

```js static
import ApplicantFavIcon from '@potok/icons/glyph/applicant/fav';

const IconExample = () => (
  <div>
    <ApplicantFavIcon />
  </div>
);
```

#### Clear icons pack

Import icons from this pack using this path template: `@potok/icons/glyph/clear/${FILENAME}` where
`FILENAME` is a label right below the icon you want to use.

```js
const ClearIcons = require('../docs/ClearIcons').default;

<ClearIcons />;
```

#### Applicant actions

```js
const IconGrid = require('../../../utils/Grid').default;
const ApplicantRejectIcon = require('../glyph/applicant/reject').default;
const ApplicantMoreActionsIcon = require('../glyph/applicant/more-actions')
  .default;
const ApplicantMoveIcon = require('../glyph/applicant/move').default;
const ApplicantScheduleIcon = require('../glyph/applicant/schedule').default;
const ApplicantMessageIcon = require('../glyph/applicant/message').default;
const ApplicantMailIcon = require('../glyph/applicant/mail').default;
const ApplicantFavIcon = require('../glyph/applicant/fav').default;
const ApplicantLinkIcon = require('../glyph/applicant/link').default;

<IconGrid columnCount={12}>
  <ApplicantRejectIcon size="large" />
  <ApplicantMoreActionsIcon size="large" />
  <ApplicantMoveIcon size="large" />
  <ApplicantScheduleIcon size="large" />
  <ApplicantMailIcon size="large" />
  <ApplicantMessageIcon size="large" />
  <ApplicantFavIcon size="large" />
  <ApplicantLinkIcon size="large" />
</IconGrid>;
```

#### Rich text editor icons

```js
const IconGrid = require('../../../utils/Grid').default;
const EditorTextIncreaseIcon = require('../glyph/editor/text-increase').default;
const EditorTextDecreaseIcon = require('../glyph/editor/text-decrease').default;
const EditorUnorderedListIcon = require('../glyph/editor/unordered-list')
  .default;
const EditorOrderedListIcon = require('../glyph/editor/ordered-list').default;
const EditorBoldIcon = require('../glyph/editor/bold').default;
const EditorItalicIcon = require('../glyph/editor/italic').default;
const EditorUnderlineIcon = require('../glyph/editor/underline').default;

<IconGrid columnCount={12}>
  <EditorTextIncreaseIcon />
  <EditorTextDecreaseIcon />
  <EditorUnorderedListIcon />
  <EditorOrderedListIcon />
  <EditorBoldIcon />
  <EditorItalicIcon />
  <EditorUnderlineIcon />
</IconGrid>;
```

#### Social icons

```js
const IconGrid = require('../../../utils/Grid').default;
const SocialSkypeIcon = require('../glyph/social/skype').default;
const SocialLinkedinIcon = require('../glyph/social/linkedin').default;
const SocialFacebookIcon = require('../glyph/social/facebook').default;
const SocialTwitterIcon = require('../glyph/social/twitter').default;

<IconGrid columnCount={12}>
  <SocialSkypeIcon />
  <SocialLinkedinIcon />
  <SocialFacebookIcon />
  <SocialTwitterIcon />
</IconGrid>;
```

#### Miscellaneous icons

```js
const IconGrid = require('../../../utils/Grid').default;
const ArrowDownIcon = require('../glyph/misc/arrow-down').default;
const BackIcon = require('../glyph/misc/back').default;
const CalendarNormalIcon = require('../glyph/misc/calendar-normal').default;
const CalendarSmallIcon = require('../glyph/misc/calendar-small').default;
const ClearIcon = require('../glyph/misc/clear').default;
const CloseListIcon = require('../glyph/misc/close-list').default;
const ClosedEnvelopeIcon = require('../glyph/misc/closed-envelope').default;
const ContactCircleIcon = require('../glyph/misc/contact-circle').default;
const CreateIcon = require('../glyph/misc/create').default;
const CurrencyRubleIcon = require('../glyph/misc/currency-ruble').default;
const DialogueIcon = require('../glyph/misc/dialogue').default;
const DndControlHorizontalIcon = require('../glyph/misc/dnd-control-horizontal')
  .default;
const DndControlVerticalIcon = require('../glyph/misc/dnd-control-vertical')
  .default;
const ExcelIcon = require('../glyph/misc/excel').default;
const FavIcon = require('../glyph/misc/fav').default;
const FolderOpenIcon = require('../glyph/misc/folder-opened').default;
const FunnelIcon = require('../glyph/misc/funnel').default;
const InfoIcon = require('../glyph/misc/info').default;
const MailIcon = require('../glyph/misc/mail').default;
const MapIcon = require('../glyph/misc/map').default;
const MoreVertIcon = require('../glyph/misc/more-vert').default;
const MoreHorIcon = require('../glyph/misc/more-hor').default;
const PencilMiniIcon = require('../glyph/misc/pencil-mini').default;
const PencilIcon = require('../glyph/misc/pencil').default;
const PhoneIcon = require('../glyph/misc/phone').default;
const PinFullcolorIcon = require('../glyph/misc/pin-fullcolor').default;
const SearchIcon = require('../glyph/misc/search').default;
const SendIcon = require('../glyph/misc/send').default;
const SettingsIcon = require('../glyph/misc/settings').default;
const TrashIcon = require('../glyph/misc/trash').default;
const UnfavIcon = require('../glyph/misc/unfav').default;
const ApplicantCallIcon = require('../glyph/misc/call').default;
const ApplicantCallResultIcon = require('../glyph/misc/call-result').default;
const NetworkIcon = require('../glyph/misc/network').default;
const AlarmIcon = require('../glyph/misc/alarm').default;
const CommentIcon = require('../glyph/misc/comment').default;
const Mail2Icon = require('../glyph/misc/mail-2').default;
const Send2Icon = require('../glyph/misc/send-2').default;
const EventIcon = require('../glyph/misc/event').default;
const AttentionIcon = require('../glyph/misc/attention').default;
const CopyIcon = require('../glyph/misc/copy').default;
const LinkIcon = require('../glyph/misc/link').default;
const PrintIcon = require('../glyph/misc/print').default;
const SaveIcon = require('../glyph/misc/save').default;
const NotificationIcon = require('../glyph/misc/notification').default;
const AlretIcon = require('../glyph/misc/alert').default;
const CardIcon = require('../glyph/misc/card').default;
const FullCardIcon = require('../glyph/misc/full-card').default;
const ShareIcon = require('../glyph/misc/share').default;
const CycleIcon = require('../glyph/misc/cycle').default;
const Copy2Icon = require('../glyph/misc/copy-2').default;
const DeleteIcon = require('../glyph/misc/delete').default;
const FlagIcon = require('../glyph/misc/flag').default;

<IconGrid columnCount={12}>
  <CreateIcon />
  <ExcelIcon />
  <DndControlVerticalIcon />
  <DndControlHorizontalIcon />
  <PencilIcon />
  <FunnelIcon />
  <SearchIcon />
  <BackIcon />
  <DialogueIcon />
  <CalendarNormalIcon />
  <ClosedEnvelopeIcon />
  <ContactCircleIcon />
  <CloseListIcon />
  <SendIcon />
  <InfoIcon />
  <CurrencyRubleIcon />
  <SettingsIcon />
  <TrashIcon />
  <ArrowDownIcon />
  <PencilMiniIcon />
  <CalendarSmallIcon />
  <ClearIcon />
  <MailIcon />
  <FavIcon />
  <UnfavIcon />
  <FolderOpenIcon />
  <MapIcon />
  <MoreVertIcon />
  <MoreHorIcon />
  <PhoneIcon />
  <PinFullcolorIcon />
  <ApplicantCallIcon />
  <ApplicantCallResultIcon />
  <AlarmIcon />
  <CommentIcon />
  <Mail2Icon />
  <Send2Icon />
  <EventIcon />
  <NetworkIcon secondaryColor="#26bdfc" />
  <AttentionIcon primaryColor="black" secondaryColor="#FFD541" />
  <CopyIcon />
  <LinkIcon />
  <PrintIcon />
  <SaveIcon />
  <NotificationIcon primaryColor="#0ce0ad" />
  <AlretIcon primaryColor="#ff1a1a" />
  <CardIcon />
  <FullCardIcon />
  <ShareIcon />
  <CycleIcon />
  <Copy2Icon />
  <DeleteIcon />
  <FlagIcon />
</IconGrid>;
```

#### Applicant events icons

```js
const IconGrid = require('../../../utils/Grid').default;
const ActivationIcon = require('../glyph/events/activation').default;
const AttachDocumentsIcon = require('../glyph/events/attach-documents').default;
const AttachDocuments2Icon = require('../glyph/events/attach-documents-2')
  .default;
const BartErrorIcon = require('../glyph/events/bart-error').default;
const BartFailureIcon = require('../glyph/events/bart-failure').default;
const BartNotEnoughDataIcon = require('../glyph/events/bart-not-enough-data')
  .default;
const BartSuccessIcon = require('../glyph/events/bart-success').default;
const CallIcon = require('../glyph/events/call').default;
const CommentIcon = require('../glyph/events/comment').default;
const CoverLetterIcon = require('../glyph/events/cover-letter').default;
const DeactivationIcon = require('../glyph/events/deactivation').default;
const DeclineIcon = require('../glyph/events/decline').default;
const EmailIcon = require('../glyph/events/email').default;
const InitiateIcon = require('../glyph/events/initiate').default;
const ReminderIcon = require('../glyph/events/reminder').default;
const RemoveIcon = require('../glyph/events/remove').default;
const ResponseIcon = require('../glyph/events/response').default;
const RetrieveIcon = require('../glyph/events/retrieve').default;
const ScheduleIcon = require('../glyph/events/schedule').default;
const SendMessageIcon = require('../glyph/events/send-message').default;
const StageIcon = require('../glyph/events/stage').default;
const SystemIcon = require('../glyph/events/system').default;

<IconGrid columnCount={12}>
  <ActivationIcon />
  <AttachDocumentsIcon />
  <AttachDocuments2Icon />
  <BartErrorIcon />
  <BartFailureIcon />
  <BartNotEnoughDataIcon />
  <BartSuccessIcon />
  <CallIcon />
  <CommentIcon />
  <CoverLetterIcon />
  <DeactivationIcon />
  <DeclineIcon />
  <EmailIcon />
  <InitiateIcon />
  <ReminderIcon />
  <RemoveIcon />
  <ResponseIcon />
  <RetrieveIcon />
  <ScheduleIcon />
  <SendMessageIcon />
  <StageIcon />
  <SystemIcon />
</IconGrid>;
```

#### Applicant notifications icons

```js
const IconGrid = require('../../../utils/Grid').default;
const ApplicantAppliedIcon = require('../glyph/notifications/applicant_applied')
  .default;
const ApplicantClientCommentIcon = require('../glyph/notifications/applicant_client_comment')
  .default;
const AttachDocumentsIcon = require('../glyph/notifications/attach_documents')
  .default;
const AuthErrorIcon = require('../glyph/notifications/auth_error').default;
const AutoimportHhFinIcon = require('../glyph/notifications/autoimport_hh_fin')
  .default;
const AutoimportHhNoAIcon = require('../glyph/notifications/autoimport_hh_no_a')
  .default;
const AutoimportSjFinIcon = require('../glyph/notifications/autoimport_sj_fin')
  .default;
const AutoimportSjNoAIcon = require('../glyph/notifications/autoimport_sj_no_a')
  .default;
const CallIcon = require('../glyph/notifications/call').default;
const CreateCallIcon = require('../glyph/notifications/create_call').default;
const CreateScheduleIcon = require('../glyph/notifications/create_schedule')
  .default;
const DestroyScheduleIcon = require('../glyph/notifications/destroy_schedule')
  .default;
const JobsUserAssignedIcon = require('../glyph/notifications/jobs_user_assigned')
  .default;
const ReferIcon = require('../glyph/notifications/refer').default;
const ReminderIcon = require('../glyph/notifications/reminder').default;
const ResponseIcon = require('../glyph/notifications/response').default;
const ScheduleIcon = require('../glyph/notifications/schedule').default;
const SendMessageIcon = require('../glyph/notifications/send_message').default;
const SetExecutiveRecrutierIcon = require('../glyph/notifications/set_executive_recruiter')
  .default;
const UpdateCallIcon = require('../glyph/notifications/update_call').default;
const UpdateScheduleIcon = require('../glyph/notifications/update_schedule')
  .default;

<IconGrid columnCount={12}>
  <ApplicantAppliedIcon />
  <ApplicantClientCommentIcon />
  <AttachDocumentsIcon />
  <AuthErrorIcon />
  <AutoimportHhFinIcon />
  <AutoimportHhNoAIcon />
  <AutoimportSjFinIcon />
  <AutoimportSjNoAIcon />
  <CallIcon />
  <CreateCallIcon />
  <CreateScheduleIcon />
  <DestroyScheduleIcon />
  <JobsUserAssignedIcon />
  <ReferIcon />
  <ReminderIcon />
  <ResponseIcon />
  <ScheduleIcon />
  <SendMessageIcon />
  <SetExecutiveRecrutierIcon />
  <UpdateCallIcon />
  <UpdateScheduleIcon />
</IconGrid>;
```

#### Navigation icons

```js
const IconGrid = require('../../../utils/Grid').default;
const AnalyticIcon = require('../glyph/navigations/analytic').default;
const ApplicantsIcon = require('../glyph/navigations/applicants').default;
const Calendarcon = require('../glyph/navigations/calendar').default;
const NotificationIcon = require('../glyph/navigations/notifications').default;
const OffersIcon = require('../glyph/navigations/offers').default;
const ProfileIcon = require('../glyph/navigations/profile').default;
const RequestsIcon = require('../glyph/navigations/requests').default;
const VacanciesIcon = require('../glyph/navigations/vacancies').default;
const MoreIcon = require('../glyph/navigations/more').default;
const PersonalProfileIcon = require('../glyph/navigations/personal-profile').default;
const CompanySettingsIcon = require('../glyph/navigations/company-settings').default;
const BaseKnowledgeIcon = require('../glyph/navigations/base-knowledge').default;
const OnboardingIcon = require('../glyph/navigations/onboarding').default;
const GoogleChromeIcon = require('../glyph/navigations/google-chrome').default;

<IconGrid columnCount={12}>
  <AnalyticIcon />
  <ApplicantsIcon />
  <Calendarcon />
  <NotificationIcon />
  <OffersIcon />
  <ProfileIcon />
  <RequestsIcon />
  <VacanciesIcon />
  <MoreIcon />
  <PersonalProfileIcon />
  <CompanySettingsIcon />
  <BaseKnowledgeIcon />
  <OnboardingIcon />
  <GoogleChromeIcon />
</IconGrid>;
```

#### Social icons

```js
const SocialIcons = require('../docs/SocialIcons').default;

<SocialIcons />;
```