### Basic usage

```jsx static
import { DownloadGlyph } from 'frontend-react-components';

...
<DownloadGlyph />
...
```

### Glyphs

```js
import StyleguideIcons from '../src/styleguide/styleguide-icons';

import AddGlyph from '../src/components/icons/glyphs/add';
import AnalyticsGlyph from '../src/components/icons/glyphs/analytics';
import ArchiveGlyph from '../src/components/icons/glyphs/archive';
import ArrowDownGlyph from '../src/components/icons/glyphs/arrow-down';
import ArrowLeftGlyph from '../src/components/icons/glyphs/arrow-left';
import ArrowRightGlyph from '../src/components/icons/glyphs/arrow-right';
import ArrowUpGlyph from '../src/components/icons/glyphs/arrow-up';
import BoldGlyph from '../src/components/icons/glyphs/bold';
import CalendarGlyph from '../src/components/icons/glyphs/calendar';
import CaretDownGlyph from '../src/components/icons/glyphs/caret-down';
import CaretLeftGlyph from '../src/components/icons/glyphs/caret-left';
import CaretRightGlyph from '../src/components/icons/glyphs/caret-right';
import CaretUpGlyph from '../src/components/icons/glyphs/caret-up';
import CatalogGlyph from '../src/components/icons/glyphs/catalog';
import InCatalogGlyph from '../src/components/icons/glyphs/in-catalog';
import ChatGlyph from '../src/components/icons/glyphs/chat';
import CheckmarkGlyph from '../src/components/icons/glyphs/checkmark';
import ChevDownGlyph from '../src/components/icons/glyphs/chev-down';
import ChevLeftGlyph from '../src/components/icons/glyphs/chev-left';
import ChevRightGlyph from '../src/components/icons/glyphs/chev-right';
import ChevUpGlyph from '../src/components/icons/glyphs/chev-up';
import ClearFormattingGlyph from '../src/components/icons/glyphs/clear-formatting';
import ClearGlyph from '../src/components/icons/glyphs/clear';
import ClockGlyph from '../src/components/icons/glyphs/clock';
import CloseGlyph from '../src/components/icons/glyphs/close';
import DigitalGlyph from '../src/components/icons/glyphs/digital';
import DownloadGlyph from '../src/components/icons/glyphs/download';
import DragGlyph from '../src/components/icons/glyphs/drag';
import EditGlyph from '../src/components/icons/glyphs/edit';
import GridGlyph from '../src/components/icons/glyphs/grid';
import InfoGlyph from '../src/components/icons/glyphs/info';
import KabobGlyph from '../src/components/icons/glyphs/kabob';
import KeyGlyph from '../src/components/icons/glyphs/key';
import ItalicGlyph from '../src/components/icons/glyphs/italic';
import LaptopGlyph from '../src/components/icons/glyphs/laptop';
import LineGraphGlyph from '../src/components/icons/glyphs/line-graph';
import LinkGlyph from '../src/components/icons/glyphs/link';
import ListGlyph from '../src/components/icons/glyphs/list';
import MobilePhoneGlyph from '../src/components/icons/glyphs/mobile-phone';
import OptionsGlyph from '../src/components/icons/glyphs/options';
import PaperclipGlyph from '../src/components/icons/glyphs/paperclip';
import PhysicalGlyph from '../src/components/icons/glyphs/physical';
import RefreshGlyph from '../src/components/icons/glyphs/refresh';
import RssGlyph from '../src/components/icons/glyphs/rss';
import SearchGlyph from '../src/components/icons/glyphs/search';
import SettingsGlyph from '../src/components/icons/glyphs/settings';
import SortGlyph from '../src/components/icons/glyphs/sort';
import SortDownGlyph from '../src/components/icons/glyphs/sort-down';
import SortUpGlyph from '../src/components/icons/glyphs/sort-up';
import StackedGraphGlyph from '../src/components/icons/glyphs/stacked-graph';
import TrashGlyph from '../src/components/icons/glyphs/trash';
import UnarchiveGlyph from '../src/components/icons/glyphs/unarchive';
import UnderlineGlyph from '../src/components/icons/glyphs/underline';
import UploadGlyph from '../src/components/icons/glyphs/upload';
import VideoGlyph from '../src/components/icons/glyphs/video';
import WarningGlyph from '../src/components/icons/glyphs/warning';
import WavesGlyph from '../src/components/icons/glyphs/waves';
import ZoomInGlyph from '../src/components/icons/glyphs/zoom-in';
import ZoomOutGlyph from '../src/components/icons/glyphs/zoom-out';
import ShareGlyph from '../src/components/icons/glyphs/share';



const glyphs = [{
    label: 'AddGlyph',
    icon: <AddGlyph />
}, {
    label: 'AnalyticsGlyph',
    icon: <AnalyticsGlyph />
}, {
    label: 'ArchiveGlyph',
    icon: <ArchiveGlyph />
}, {
    label: 'ArrowDownGlyph',
    icon: <ArrowDownGlyph />
}, {
    label: 'ArrowLeftGlyph',
    icon: <ArrowLeftGlyph />
}, {
    label: 'ArrowRightGlyph',
    icon: <ArrowRightGlyph />
}, {
    label: 'ArrowUpGlyph',
    icon: <ArrowUpGlyph />
}, {
    label: 'BoldGlyph',
    icon: <BoldGlyph />
}, {
    label: 'CalendarGlyph',
    icon: <CalendarGlyph />
}, {
    label: 'CaretDownGlyph',
    icon: <CaretDownGlyph />
}, {
    label: 'CaretLeftGlyph',
    icon: <CaretLeftGlyph />
}, {
    label: 'CaretRightGlyph',
    icon: <CaretRightGlyph />
}, {
    label: 'CaretUpGlyph',
    icon: <CaretUpGlyph />
}, {
    label: 'ChatGlyph',
    icon: <ChatGlyph />
}, {
    label: 'CheckmarkGlyph',
    icon: <CheckmarkGlyph />
}, {
    label: 'ChevDownGlyph',
    icon: <ChevDownGlyph />
}, {
    label: 'ChevLeftGlyph',
    icon: <ChevLeftGlyph />
}, {
    label: 'ChevRightGlyph',
    icon: <ChevRightGlyph />
}, {
    label: 'ChevUpGlyph',
    icon: <ChevUpGlyph />
}, {
    label: 'ClearFormattingGlyph',
    icon: <ClearFormattingGlyph />
}, {
    label: 'ClearGlyph',
    icon: <ClearGlyph />
}, {
    label: 'ClockGlyph',
    icon: <ClockGlyph />
}, {
    label: 'CloseGlyph',
    icon: <CloseGlyph />
}, {
    label: 'DigitalGlyph',
    icon: <DigitalGlyph />
}, {
    label: 'DownloadGlyph',
    icon: <DownloadGlyph />
}, {
    label: 'DragGlyph',
    icon: <DragGlyph />
}, {
    label: 'EditGlyph',
    icon: <EditGlyph />
}, {
    label: 'InfoGlyph',
    icon: <InfoGlyph />
}, {
    label: 'KabobGlyph',
    icon: <KabobGlyph />
}, {
    label: 'KeyGlyph',
    icon: <KeyGlyph />
}, {
    label: 'CatalogGlyph',
    icon: <CatalogGlyph />
}, {
    label: 'ShareGlyph',
    icon: <ShareGlyph />
},{
    label: 'GridGlyph',
    icon: <GridGlyph />
},{
    label: 'InCatalogGlyph',
    icon: <InCatalogGlyph />
}, {
    label: 'ItalicGlyph',
    icon: <ItalicGlyph />
}, {
    label: 'LaptopGlyph',
    icon: <LaptopGlyph />
}, {
    label: 'LineGraphGlyph',
    icon: <LineGraphGlyph />
}, {
    label: 'LinkGlyph',
    icon: <LinkGlyph />
}, {
    label: 'ListGlyph',
    icon: <ListGlyph />
}, {
    label: 'MobilePhoneGlyph',
    icon: <MobilePhoneGlyph />
}, {
    label: 'OptionsGlyph',
    icon: <OptionsGlyph />
}, {
    label: 'PaperclipGlyph',
    icon: <PaperclipGlyph />
}, {
    label: 'PhysicalGlyph',
    icon: <PhysicalGlyph />
}, {
    label: 'RefreshGlyph',
    icon: <RefreshGlyph />
}, {
    label: 'RssGlyph',
    icon: <RssGlyph />
}, {
    label: 'SearchGlyph',
    icon: <SearchGlyph />
}
, {
    label: 'SettingsGlyph',
    icon: <SettingsGlyph />
}
, {
    label: 'SortGlyph',
    icon: <SortGlyph />
}
, {
    label: 'SortDownGlyph',
    icon: <SortDownGlyph />
}
, {
    label: 'SortUpGlyph',
    icon: <SortUpGlyph />
}
, {
    label: 'StackedGraphGlyph',
    icon: <StackedGraphGlyph />
}
, {
    label: 'TrashGlyph',
    icon: <TrashGlyph />
}
, {
    label: 'UnarchiveGlyph',
    icon: <UnarchiveGlyph />
}
, {
    label: 'UnderlineGlyph',
    icon: <UnderlineGlyph />
}
, {
    label: 'UploadGlyph',
    icon: <UploadGlyph />
}
, {
    label: 'VideoGlyph',
    icon: <VideoGlyph />
}
, {
    label: 'WarningGlyph',
    icon: <WarningGlyph />
}
, {
    label: 'WavesGlyph',
    icon: <WavesGlyph />
}
, {
    label: 'ZoomInGlyph',
    icon: <ZoomInGlyph />
}
, {
    label: 'ZoomOutGlyph',
    icon: <ZoomOutGlyph />
}];


<StyleguideIcons items={ glyphs } className="frc-styleguide-glyphs" />
```

### Outlines

```js
import StyleguideIcons from '../src/styleguide/styleguide-icons';

import AccountingOutline from '../src/components/icons/outlines/accounting';
import AnalyticsOutline from '../src/components/icons/outlines/analytics';
import ArtistsOutline from '../src/components/icons/outlines/artists';
import ArtworkOutline from '../src/components/icons/outlines/artwork';
import CdOutline from '../src/components/icons/outlines/cd';
import CsvOutline from '../src/components/icons/outlines/csv';
import CalendarOutline from '../src/components/icons/outlines/calendar';
import ClipboardOutline from '../src/components/icons/outlines/clipboard';
import CoverartOutline from '../src/components/icons/outlines/coverart';
import DataOutline from '../src/components/icons/outlines/data';
import DigitalAudioOutline from '../src/components/icons/outlines/digital-audio';
import FilmOutline from '../src/components/icons/outlines/film';
import IdeasOutline from '../src/components/icons/outlines/ideas';
import MarketingOutline from '../src/components/icons/outlines/marketing';
import MusicVideoOutline from '../src/components/icons/outlines/music-video';
import NewsOutline from '../src/components/icons/outlines/news';
import PdfOutline from '../src/components/icons/outlines/pdf';
import PhotoOutline from '../src/components/icons/outlines/photo';
import PodcastFileOutline from '../src/components/icons/outlines/podcast-file';
import ProductsOutline from '../src/components/icons/outlines/products';
import ProjectOutline from '../src/components/icons/outlines/project';
import SearchResultsOutline from '../src/components/icons/outlines/search-results';
import TechnologyOutline from '../src/components/icons/outlines/technology';
import TracklistOutline from '../src/components/icons/outlines/tracklist';
import VideoTourOutline from '../src/components/icons/outlines/video-tour';
import VinylOutline from '../src/components/icons/outlines/vinyl';

const outlines = [{
    label: 'AccountingOutline',
    icon: <AccountingOutline />
}
, {
    label: 'AnalyticsOutline',
    icon: <AnalyticsOutline />
}
, {
    label: 'ArtistsOutline',
    icon: <ArtistsOutline />
}
, {
    label: 'ArtworkOutline',
    icon: <ArtworkOutline />
}
, {
    label: 'CdOutline',
    icon: <CdOutline />
}
, {
    label: 'CsvOutline',
    icon: <CsvOutline />
}
, {
    label: 'CalendarOutline',
    icon: <CalendarOutline />
}
, {
    label: 'ClipboardOutline',
    icon: <ClipboardOutline />
}
, {
    label: 'CoverartOutline',
    icon: <CoverartOutline />
}
, {
    label: 'DataOutline',
    icon: <DataOutline />
}, {
    label: 'DigitalAudioOutline',
    icon: <DigitalAudioOutline />
}
, {
    label: 'FilmOutline',
    icon: <FilmOutline />
}
, {
    label: 'IdeasOutline',
    icon: <IdeasOutline />
}
, {
    label: 'MarketingOutline',
    icon: <MarketingOutline />
}
, {
    label: 'MusicVideoOutline',
    icon: <MusicVideoOutline />
}
, {
    label: 'NewsOutline',
    icon: <NewsOutline />
}
, {
    label: 'PdfOutline',
    icon: <PdfOutline />
}
, {
    label: 'PhotoOutline',
    icon: <PhotoOutline />
}
, {
    label: 'PodcastFileOutline',
    icon: <PodcastFileOutline />
}
, {
    label: 'ProductsOutline',
    icon: <ProductsOutline />
}
, {
    label: 'ProjectOutline',
    icon: <ProjectOutline />
}
, {
    label: 'SearchResultsOutline',
    icon: <SearchResultsOutline />
}
, {
    label: 'TechnologyOutline',
    icon: <TechnologyOutline />
}
, {
    label: 'TracklistOutline',
    icon: <TracklistOutline />
}
, {
    label: 'VideoTourOutline',
    icon: <VideoTourOutline />
}
, {
    label: 'VinylOutline',
    icon: <VinylOutline />
}
];

<StyleguideIcons items={ outlines } className="frc-styleguide-outlines" />
```
### Misc.

```js
import StyleguideIcons from '../src/styleguide/styleguide-icons';
import OrchardIcon from '../src/components/icons/icons/orchard';
import OverdriveIcon from '../src/components/icons/icons/overdrive';
import SMEIcon from '../src/components/icons/icons/sme';
import AudioPlayIcon from '../src/components/icons/icons/audio-play';
import AudioPauseIcon from '../src/components/icons/icons/audio-pause';
import InCatalogIcon from '../src/components/icons/icons/in-catalog';
import StarIcon from '../src/components/icons/icons/star';
import AlgorithmicIcon from '../src/components/icons/icons/algorithmic';
import PersonalizedIcon from '../src/components/icons/icons/personalized';
import PeakPositionIcon from '../src/components/icons/icons/peakposition';
import InsightsIcon from '../src/components/icons/icons/apps/insights';
import MoneyhubIcon from '../src/components/icons/icons/apps/moneyhub';
import CollaboratorsIcon from '../src/components/icons/icons/apps/collaborators';
import PodcastsIcon from '../src/components/icons/icons/apps/podcasts';
import PublishingIcon from '../src/components/icons/icons/apps/publishing';
import SettingsIcon from '../src/components/icons/icons/apps/settings';
import WorkstationIcon from '../src/components/icons/icons/apps/workstation';
import SMEPodcastsIcon from '../src/components/icons/icons/apps/sme-podcasts';
import ContentReviewIcon from '../src/components/icons/icons/apps/content-review';
import OverdriveInsightsIcon from '../src/components/icons/icons/apps/overdrive-insights';
import OverdrivePublishingIcon from '../src/components/icons/icons/apps/overdrive-publishing';
import OverdriveMoneyhubIcon from '../src/components/icons/icons/apps/overdrive-moneyhub';
import OverdriveCollaboratorsIcon from '../src/components/icons/icons/apps/overdrive-collaborators';
import OverdrivePodcastsIcon from '../src/components/icons/icons/apps/overdrive-podcasts';
import OverdriveSettingsIcon from '../src/components/icons/icons/apps/overdrive-settings';
import OverdriveWorkstationIcon from '../src/components/icons/icons/apps/overdrive-workstation';
import OverdriveContentReviewIcon from '../src/components/icons/icons/apps/overdrive-content-review';
import CountryFlag from '../src/components/icons/flags/country-flag';

const items = [{
    label: 'OrchardIcon',
    icon: <OrchardIcon />
}
, {
    label: 'OverdriveIcon',
    icon: <OverdriveIcon />
}
, {
    label: 'SMEIcon',
    icon: <SMEIcon />
}
, {
    label: 'InCatalogIcon',
    icon: <InCatalogIcon />
}
, {
    label: 'InsightsIcon',
    icon: <InsightsIcon />
}
, {
    label: 'PublishingIcon',
    icon: <PublishingIcon />
}
, {
    label: 'MoneyhubIcon',
    icon: <MoneyhubIcon />
}
, {
    label: 'CollaboratorsIcon',
    icon: <CollaboratorsIcon />
}
, {
    label: 'PodcastsIcon',
    icon: <PodcastsIcon />
}
, {
    label: 'SettingsIcon',
    icon: <SettingsIcon />
}
,  {
    label: 'WorkstationIcon',
    icon: <WorkstationIcon />
}
,  {
    label: 'SMEPodcastsIcon',
    icon: <SMEPodcastsIcon />
}
, {
    label: 'ContentReviewIcon',
    icon: <ContentReviewIcon />
}
, {
    label: 'OverdriveInsightsIcon',
    icon: <OverdriveInsightsIcon />
}
, {
    label: 'OverdriveMoneyhubIcon',
    icon: <OverdriveMoneyhubIcon />
}
, {
    label: 'OverdriveCollaboratorsIcon',
    icon: <OverdriveCollaboratorsIcon />
}
, {
    label: 'OverdrivePodcastsIcon',
    icon: <OverdrivePodcastsIcon />
}
, {
    label: 'OverdriveSettingsIcon',
    icon: <OverdriveSettingsIcon />
}
, {
    label: 'OverdrivePublishingIcon',
    icon: <OverdrivePublishingIcon />
}
, {
    label: 'OverdriveWorkstationIcon',
    icon: <OverdriveWorkstationIcon />
}
, {
    label: 'OverdriveContentReviewIcon',
    icon: <OverdriveContentReviewIcon />
}
, {
    label: 'AudioPlayIcon',
    icon: <AudioPlayIcon />
}
, {
    label: 'AudioPauseIcon',
    icon: <AudioPauseIcon />
}
, {
    label: 'StarIcon',
    icon: <StarIcon />
}
, {
    label: 'StarIcon filled',
    icon: <StarIcon filled />
}
, {
    label: 'AlgorithmicIcon',
    icon: <AlgorithmicIcon />
}
, {
    label: 'PersonalizedIcon',
    icon: <PersonalizedIcon />
}
, {
    label: 'PeakPositionIcon',
    icon: <PeakPositionIcon />
}
, {
    label: 'CountryFlag US',
    icon: <CountryFlag countryCode="US" />
}
, {
    label: 'CountryFlag GLOBAL',
    icon: <CountryFlag countryCode="GLOBAL" />
}
];

<StyleguideIcons items={ items } className="frc-styleguide-icons" />
```

### Store icons

```js
import StyleguideIcons from '../src/styleguide/styleguide-icons';
import AmazonIcon from '../src/icon-components/amazon/amazon';
import AppleMusicIcon from '../src/icon-components/apple-music/apple-music';
import ApplePodcastStoreIcon from '../src/components/icons/stores/apple-podcast';
import DeezerIcon from '../src/icon-components/deezer/deezer';
import LinemusicIcon from '../src/icon-components/linemusic/linemusic';
import ShazamIcon from '../src/icon-components/shazam/shazam';
import SoundcloudIcon from '../src/icon-components/soundcloud/soundcloud';
import RecochokuIcon from '../src/icon-components/recochoku/recochoku';
import TiktokIcon from '../src/icon-components/tiktok/tiktok';
import YoutubeIcon from '../src/icon-components/youtube/youtube';
import FacebookStoreIcon from '../src/components/icons/stores/facebook';
import SpotifyStoreIcon from '../src/components/icons/stores/spotify';
import StitcherStoreIcon from '../src/components/icons/stores/stitcher';
import ChartableStoreIcon from '../src/components/icons/stores/chartable';


const items = [{
    label: 'AmazonIcon',
    icon: <AmazonIcon />
}
, {
    label: 'AppleMusicIcon',
    icon: <AppleMusicIcon />
}
, {
    label: 'ApplePodcastStoreIcon',
    icon: <ApplePodcastStoreIcon />
}
, {
    label: 'DeezerIcon',
    icon: <DeezerIcon />
}
, {
    label: 'LinemusicIcon',
    icon: <LinemusicIcon />
}
, {
    label: 'ShazamIcon',
    icon: <ShazamIcon />
}
, {
    label: 'SoundcloudIcon',
    icon: <SoundcloudIcon />
}
, {
    label: 'RecochokuIcon',
    icon: <RecochokuIcon />
}
, {
    label: 'TiktokIcon',
    icon: <TiktokIcon />
}
, {
    label: 'YoutubeIcon',
    icon: <YoutubeIcon />
}
, {
    label: 'FacebookStoreIcon',
    icon: <FacebookStoreIcon />
}
, {
    label: 'SpotifyStoreIcon',
    icon: <SpotifyStoreIcon />
}
, {
    label: 'StitcherStoreIcon',
    icon: <StitcherStoreIcon />
}
, {
    label: 'ChartableStoreIcon',
    icon: <ChartableStoreIcon />
}
];

<StyleguideIcons items={ items } className="frc-styleguide-icons" />
```

### Group icons

```js
import StyleguideIcons from '../src/styleguide/styleguide-icons';
import AccountingGroup from '../src/components/icons/icon-groups/accounting-group';
import AnalyticsGroup from '../src/components/icons/icon-groups/analytics-group';
import MarketingGroup from '../src/components/icons/icon-groups/marketing-group';
import ProductGroup from '../src/components/icons/icon-groups/product-group';

const items = [
{
    label: 'AccountingGroup',
    icon: <AccountingGroup />
},
{
    label: 'AnalyticsGroup',
    icon: <AnalyticsGroup />
},
{
    label: 'MarketingGroup',
    icon: <MarketingGroup />
},
{
    label: 'ProductGroup',
    icon: <ProductGroup />
},
];

<StyleguideIcons items={ items } className="frc-styleguide-outlines" />
```

### Navigation icons

```js
import StyleguideIcons from '../src/styleguide/styleguide-icons';
import CatalogNavigationIcon from '../src/components/icons/navigation/catalog';
import ChartsNavigationIcon from '../src/components/icons/navigation/charts';
import FavoritiesNavigationIcon from '../src/components/icons/navigation/favorities';
import SearchNavigationIcon from '../src/components/icons/navigation/search';
import ReviewsNavigationIcon from '../src/components/icons/navigation/reviews';

const items = [
{
    label: 'CatalogNavigationIcon',
    icon: <CatalogNavigationIcon />
},
{
    label: 'ChartsNavigationIcon',
    icon: <ChartsNavigationIcon />
},
{
    label: 'FavoritiesNavigationIcon',
    icon: <FavoritiesNavigationIcon />
},
{
    label: 'SearchNavigationIcon',
    icon: <SearchNavigationIcon />
},
{
    label: 'ReviewsNavigationIcon',
    icon: <ReviewsNavigationIcon />
},
];

<StyleguideIcons items={ items } className="frc-styleguide-navigation" />
```