Skip to main content

Icon

Components​

The Icon component family provides the following components:

Visual Overview​

To make it easier to pick an Icon, here is a visual overview:

ApplyIcon​

An SVG icon that looks like a play triangle

You can import the ApplyIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ApplyIcon } from "@freesewing/react/components/Icon"

AsideIcon​

An SVG icon that looks like a two-column layout

You can import the AsideIcon component from the icon component family in the @freesewing/react package:

Javascript
import { AsideIcon } from "@freesewing/react/components/Icon"

BackIcon​

An SVG icon that looks like a left U-turn that we slightly rotate

You can import the BackIcon component from the icon component family in the @freesewing/react package:

Javascript
import { BackIcon } from "@freesewing/react/components/Icon"

BeakerIcon​

An SVG icon that looks like a lab beaker

You can import the BeakerIcon component from the icon component family in the @freesewing/react package:

Javascript
import { BeakerIcon } from "@freesewing/react/components/Icon"

BookmarkIcon​

An SVG icon that looks like a bookmark

You can import the BookmarkIcon component from the icon component family in the @freesewing/react package:

Javascript
import { BookmarkIcon } from "@freesewing/react/components/Icon"

BoolNoIcon​

An SVG icon that looks like a red X

You can import the BoolNoIcon component from the icon component family in the @freesewing/react package:

Javascript
import { BoolNoIcon } from "@freesewing/react/components/Icon"

BoolYesIcon​

An SVG icon that looks like a green checkbox

You can import the BoolYesIcon component from the icon component family in the @freesewing/react package:

Javascript
import { BoolYesIcon } from "@freesewing/react/components/Icon"

BulletIcon​

An SVG icon that looks like a circle

You can import the BulletIcon component from the icon component family in the @freesewing/react package:

Javascript
import { BulletIcon } from "@freesewing/react/components/Icon"

ChatIcon​

An SVG icon that looks lik a speech bubble

You can import the ChatIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ChatIcon } from "@freesewing/react/components/Icon"

CircleIcon​

An SVG icon that looks like a circle

You can import the CircleIcon component from the icon component family in the @freesewing/react package:

Javascript
import { CircleIcon } from "@freesewing/react/components/Icon"

CisFemaleIcon​

An SVG icon that looks like a female-projecting bathing suit

You can import the CisFemaleIcon component from the icon component family in the @freesewing/react package:

Javascript
import { CisFemaleIcon } from "@freesewing/react/components/Icon"

CisMaleIcon​

An SVG icon that looks like male-projecting swim trunks

You can import the CisMaleIcon component from the icon component family in the @freesewing/react package:

Javascript
import { CisMaleIcon } from "@freesewing/react/components/Icon"

CloneIcon​

An SVG icon that look like FIXME

You can import the CloneIcon component from the icon component family in the @freesewing/react package:

Javascript
import { CloneIcon } from "@freesewing/react/components/Icon"

CloseIcon​

An SVG icon that looks like an X character

You can import the CloseIcon component from the icon component family in the @freesewing/react package:

Javascript
import { CloseIcon } from "@freesewing/react/components/Icon"

CodeIcon​

An SVG icon that looks like coding brackets

You can import the CodeIcon component from the icon component family in the @freesewing/react package:

Javascript
import { CodeIcon } from "@freesewing/react/components/Icon"

CompareIcon​

An SVG icon that looks like FIXME

You can import the CompareIcon component from the icon component family in the @freesewing/react package:

Javascript
import { CompareIcon } from "@freesewing/react/components/Icon"

ControlIcon​

An SVG icon that looks like scales of justice

You can import the ControlIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ControlIcon } from "@freesewing/react/components/Icon"

CopyIcon​

An SVG icon that looks like two rounded squares above each other with a bit of offset

You can import the CopyIcon component from the icon component family in the @freesewing/react package:

Javascript
import { CopyIcon } from "@freesewing/react/components/Icon"

CoverPageIcon​

An SVG icon that looks like a page with a smiley on it

You can import the CoverPageIcon component from the icon component family in the @freesewing/react package:

Javascript
import { CoverPageIcon } from "@freesewing/react/components/Icon"

CuratedMeasurementsSetIcon​

An SVG icon that looks like a museum building

You can import the CuratedMeasurementsSetIcon component from the icon component family in the @freesewing/react package:

Javascript
import { CuratedMeasurementsSetIcon } from "@freesewing/react/components/Icon"

DesignIcon​

An SVG icon that looks like a coathanger

You can import the DesignIcon component from the icon component family in the @freesewing/react package:

Javascript
import { DesignIcon } from "@freesewing/react/components/Icon"

DetailIcon​

An SVG icon that looks like a left and right pane with different level of detail

You can import the DetailIcon component from the icon component family in the @freesewing/react package:

Javascript
import { DetailIcon } from "@freesewing/react/components/Icon"

DocsIcon​

An SVG icon that looks like a document icon

You can import the DocsIcon component from the icon component family in the @freesewing/react package:

Javascript
import { DocsIcon } from "@freesewing/react/components/Icon"

DownIcon​

An SVG icon that looks like a down pointing chevron

You can import the DownIcon component from the icon component family in the @freesewing/react package:

Javascript
import { DownIcon } from "@freesewing/react/components/Icon"

DownloadIcon​

An SVG icon that looks like a cloud with an arrow pointing down from it

You can import the DownloadIcon component from the icon component family in the @freesewing/react package:

Javascript
import { DownloadIcon } from "@freesewing/react/components/Icon"

EditIcon​

An SVG icon that looks like a pencil

You can import the EditIcon component from the icon component family in the @freesewing/react package:

Javascript
import { EditIcon } from "@freesewing/react/components/Icon"

EmailIcon​

An SVG icon that looks like an envelope

You can import the EmailIcon component from the icon component family in the @freesewing/react package:

Javascript
import { EmailIcon } from "@freesewing/react/components/Icon"

ErrorIcon​

An SVG icon that looks like FIXME

You can import the ErrorIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ErrorIcon } from "@freesewing/react/components/Icon"

ExpandIcon​

An SVG icon that looks like arrows pointing outwards

You can import the ExpandIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ExpandIcon } from "@freesewing/react/components/Icon"

ExportIcon​

An SVG icon that looks like a file/sheet with an arrow pointing downwards

You can import the ExportIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ExportIcon } from "@freesewing/react/components/Icon"

FailureIcon​

An SVG icon that looks like a ! in a triangle. This is a specifically styled NoIcon, intended to be shown on an error background.

You can import the FailureIcon component from the icon component family in the @freesewing/react package:

Javascript
import { FailureIcon } from "@freesewing/react/components/Icon"

FilterIcon​

An SVG icon that looks like a funnel

You can import the FilterIcon component from the icon component family in the @freesewing/react package:

Javascript
import { FilterIcon } from "@freesewing/react/components/Icon"

FingerprintIcon​

An SVG icon that looks like a fingerprint

You can import the FingerprintIcon component from the icon component family in the @freesewing/react package:

Javascript
import { FingerprintIcon } from "@freesewing/react/components/Icon"

FixmeIcon​

An SVG icon that looks lik an exclamation point inside a circle

You can import the FixmeIcon component from the icon component family in the @freesewing/react package:

Javascript
import { FixmeIcon } from "@freesewing/react/components/Icon"

FlagIcon​

An SVG icon that looks lik a flag

You can import the FlagIcon component from the icon component family in the @freesewing/react package:

Javascript
import { FlagIcon } from "@freesewing/react/components/Icon"

FlipIcon​

An SVG icon that looks lik a FIXME

You can import the FlipIcon component from the icon component family in the @freesewing/react package:

Javascript
import { FlipIcon } from "@freesewing/react/components/Icon"

FreeSewingIcon​

An SVG icon that looks like (or is) skully

You can import the FreeSewingIcon component from the icon component family in the @freesewing/react package:

Javascript
import { FreeSewingIcon } from "@freesewing/react/components/Icon"

GaugeIcon​

An SVG icon that looks like a gauge or speedometer

You can import the GaugeIcon component from the icon component family in the @freesewing/react package:

Javascript
import { GaugeIcon } from "@freesewing/react/components/Icon"

GitHubIcon​

An SVG icon that looks like the octocat

You can import the GitHubIcon component from the icon component family in the @freesewing/react package:

Javascript
import { GitHubIcon } from "@freesewing/react/components/Icon"

GoogleIcon​

An SVG icon that looks like the Google G

You can import the GoogleIcon component from the icon component family in the @freesewing/react package:

Javascript
import { GoogleIcon } from "@freesewing/react/components/Icon"

GroupIcon​

An SVG icon that looks like a box

You can import the GroupIcon component from the icon component family in the @freesewing/react package:

Javascript
import { GroupIcon } from "@freesewing/react/components/Icon"

HeartIcon​

An SVG icon that looks like a heart

You can import the HeartIcon component from the icon component family in the @freesewing/react package:

Javascript
import { HeartIcon } from "@freesewing/react/components/Icon"

HelpIcon​

An SVG icon that looks like a question mark in a circle

You can import the HelpIcon component from the icon component family in the @freesewing/react package:

Javascript
import { HelpIcon } from "@freesewing/react/components/Icon"

IconWrapper​

A component to wrap SVG elements as an icon. This wraps all icons we provide. The viewBox is 0 0 24 24 so this is for 24x24 icons.

You can import the IconWrapper component from the icon component family in the @freesewing/react package:

Javascript
import { IconWrapper } from "@freesewing/react/components/Icon"

IncludeIcon​

An SVG icon that looks like a pie with a slice a bit out of it

You can import the IncludeIcon component from the icon component family in the @freesewing/react package:

Javascript
import { IncludeIcon } from "@freesewing/react/components/Icon"

InstagramIcon​

An SVG icon that looks like the Instagram logo

You can import the InstagramIcon component from the icon component family in the @freesewing/react package:

Javascript
import { InstagramIcon } from "@freesewing/react/components/Icon"

KeyIcon​

An SVG icon that looks like a key

You can import the KeyIcon component from the icon component family in the @freesewing/react package:

Javascript
import { KeyIcon } from "@freesewing/react/components/Icon"

KioskIcon​

An SVG icon that looks like a rectangle with rounded corners (like a full screen display)

You can import the KioskIcon component from the icon component family in the @freesewing/react package:

Javascript
import { KioskIcon } from "@freesewing/react/components/Icon"

LeftIcon​

An SVG icon that looks like a left pointing chevron

You can import the LeftIcon component from the icon component family in the @freesewing/react package:

Javascript
import { LeftIcon } from "@freesewing/react/components/Icon"

LinkIcon​

An SVG icon that looks like a chain link

You can import the LinkIcon component from the icon component family in the @freesewing/react package:

Javascript
import { LinkIcon } from "@freesewing/react/components/Icon"

ListIcon​

An SVG icon that looks like a bullet list

You can import the ListIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ListIcon } from "@freesewing/react/components/Icon"

LockIcon​

An SVG icon that looks like a padlock

You can import the LockIcon component from the icon component family in the @freesewing/react package:

Javascript
import { LockIcon } from "@freesewing/react/components/Icon"

MarginIcon​

An SVG icon that looks like 4 boxes spaces out

You can import the MarginIcon component from the icon component family in the @freesewing/react package:

Javascript
import { MarginIcon } from "@freesewing/react/components/Icon"

MastodonIcon​

An SVG icon that looks like the Mastodon logo

You can import the MastodonIcon component from the icon component family in the @freesewing/react package:

Javascript
import { MastodonIcon } from "@freesewing/react/components/Icon"

MeasurementsIcon​

An SVG icon that looks like a tape measure

You can import the MeasurementsIcon component from the icon component family in the @freesewing/react package:

Javascript
import { MeasurementsIcon } from "@freesewing/react/components/Icon"

MeasurementsSetIcon​

An SVG icon that looks like two people's heads next/behind to each other, one bigger, one smaller

You can import the MeasurementsSetIcon component from the icon component family in the @freesewing/react package:

Javascript
import { MeasurementsSetIcon } from "@freesewing/react/components/Icon"

An SVG icon that looks like 3 horizontal lines (hamburger menu)

You can import the MenuIcon component from the icon component family in the @freesewing/react package:

Javascript
import { MenuIcon } from "@freesewing/react/components/Icon"

NewMeasurementsSetIcon​

An SVG icon that looks like a person icon with a + sign

You can import the NewMeasurementsSetIcon component from the icon component family in the @freesewing/react package:

Javascript
import { NewMeasurementsSetIcon } from "@freesewing/react/components/Icon"

NewPatternIcon​

An SVG icon that looks like page with a + sign in it

You can import the NewPatternIcon component from the icon component family in the @freesewing/react package:

Javascript
import { NewPatternIcon } from "@freesewing/react/components/Icon"

NewsletterIcon​

An SVG icon that looks like a newspaper

You can import the NewsletterIcon component from the icon component family in the @freesewing/react package:

Javascript
import { NewsletterIcon } from "@freesewing/react/components/Icon"

NoIcon​

An SVG icon that looks like the X character

You can import the NoIcon component from the icon component family in the @freesewing/react package:

Javascript
import { NoIcon } from "@freesewing/react/components/Icon"

OkIcon​

An SVG icon that looks like a checkmark

You can import the OkIcon component from the icon component family in the @freesewing/react package:

Javascript
import { OkIcon } from "@freesewing/react/components/Icon"

OptionsIcon​

An SVG icon that looks like sliders on a mixing panel

You can import the OptionsIcon component from the icon component family in the @freesewing/react package:

Javascript
import { OptionsIcon } from "@freesewing/react/components/Icon"

PageMarginIcon​

An SVG icon that looks like a page with a margin drawn around

You can import the PageMarginIcon component from the icon component family in the @freesewing/react package:

Javascript
import { PageMarginIcon } from "@freesewing/react/components/Icon"

PageOrientationIcon​

An SVG icon that looks like a portrait and landscape page stacked

You can import the PageOrientationIcon component from the icon component family in the @freesewing/react package:

Javascript
import { PageOrientationIcon } from "@freesewing/react/components/Icon"

PageSizeIcon​

An SVG icon that looks like two differently sizes pages stacked

You can import the PageSizeIcon component from the icon component family in the @freesewing/react package:

Javascript
import { PageSizeIcon } from "@freesewing/react/components/Icon"

PaperlessIcon​

An SVG icon that looks like a grid

You can import the PaperlessIcon component from the icon component family in the @freesewing/react package:

Javascript
import { PaperlessIcon } from "@freesewing/react/components/Icon"

PatternIcon​

An SVG icon that looks like a page

You can import the PatternIcon component from the icon component family in the @freesewing/react package:

Javascript
import { PatternIcon } from "@freesewing/react/components/Icon"

PlusIcon​

An SVG icon that looks like a +

You can import the PlusIcon component from the icon component family in the @freesewing/react package:

Javascript
import { PlusIcon } from "@freesewing/react/components/Icon"

PrintIcon​

An SVG icon that looks like a printer

You can import the PrintIcon component from the icon component family in the @freesewing/react package:

Javascript
import { PrintIcon } from "@freesewing/react/components/Icon"

PrivacyIcon​

An SVG icon that looks like FIXME

You can import the PrivacyIcon component from the icon component family in the @freesewing/react package:

Javascript
import { PrivacyIcon } from "@freesewing/react/components/Icon"

RedditIcon​

An SVG icon that looks like the Reddit alian

You can import the RedditIcon component from the icon component family in the @freesewing/react package:

Javascript
import { RedditIcon } from "@freesewing/react/components/Icon"

ReloadIcon​

An SVG icon that looks like FIXME

You can import the ReloadIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ReloadIcon } from "@freesewing/react/components/Icon"

ResetAllIcon​

An SVG icon that looks like a double rewind arrow

You can import the ResetAllIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ResetAllIcon } from "@freesewing/react/components/Icon"

ResetIcon​

An SVG icon that looks like a backspace key

You can import the ResetIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ResetIcon } from "@freesewing/react/components/Icon"

RightIcon​

An SVG icon that looks like a right pointing chevron

You can import the RightIcon component from the icon component family in the @freesewing/react package:

Javascript
import { RightIcon } from "@freesewing/react/components/Icon"

RocketIcon​

An SVG icon that looks like a rocket

You can import the RocketIcon component from the icon component family in the @freesewing/react package:

Javascript
import { RocketIcon } from "@freesewing/react/components/Icon"

RotateIcon​

An SVG icon that looks like two arrows in a circular layout

You can import the RotateIcon component from the icon component family in the @freesewing/react package:

Javascript
import { RotateIcon } from "@freesewing/react/components/Icon"

RssIcon​

An SVG icon that looks like the RSS symbol

You can import the RssIcon component from the icon component family in the @freesewing/react package:

Javascript
import { RssIcon } from "@freesewing/react/components/Icon"

SaIcon​

An SVG icon that looks like a small solid circle with a larger dashed circle around it

You can import the SaIcon component from the icon component family in the @freesewing/react package:

Javascript
import { SaIcon } from "@freesewing/react/components/Icon"

SaveAsIcon​

An SVG icon that looks like a cloud with a plus sign in it

You can import the SaveAsIcon component from the icon component family in the @freesewing/react package:

Javascript
import { SaveAsIcon } from "@freesewing/react/components/Icon"

SaveIcon​

An SVG icon that looks like a cloud with a plus sign in it

You can import the SaveIcon component from the icon component family in the @freesewing/react package:

Javascript
import { SaveIcon } from "@freesewing/react/components/Icon"

ScaleIcon​

An SVG icon that looks like lines of varying thickness

You can import the ScaleIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ScaleIcon } from "@freesewing/react/components/Icon"

SearchIcon​

An SVG icon that looks like a magnifying glass

You can import the SearchIcon component from the icon component family in the @freesewing/react package:

Javascript
import { SearchIcon } from "@freesewing/react/components/Icon"

SettingsIcon​

An SVG icon that looks like a gear/cog

You can import the SettingsIcon component from the icon component family in the @freesewing/react package:

Javascript
import { SettingsIcon } from "@freesewing/react/components/Icon"

ShieldIcon​

An SVG icon that looks like a shield

You can import the ShieldIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ShieldIcon } from "@freesewing/react/components/Icon"

ShowcaseIcon​

An SVG icon that looks like a picture camera

You can import the ShowcaseIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ShowcaseIcon } from "@freesewing/react/components/Icon"

SignoutIcon​

An SVG icon that looks like an exit door

You can import the SignoutIcon component from the icon component family in the @freesewing/react package:

Javascript
import { SignoutIcon } from "@freesewing/react/components/Icon"

SpinnerIcon​

An SVG icon that looks like a spinning circle

You can import the SpinnerIcon component from the icon component family in the @freesewing/react package:

Javascript
import { SpinnerIcon } from "@freesewing/react/components/Icon"

SuccessIcon​

An SVG icon that looks like a white checkbox. This is a specifically styled OkIcon, intended to be shown on a success-colored background

You can import the SuccessIcon component from the icon component family in the @freesewing/react package:

Javascript
import { SuccessIcon } from "@freesewing/react/components/Icon"

TikTokIcon​

An SVG icon that looks like the TikTok t

You can import the TikTokIcon component from the icon component family in the @freesewing/react package:

Javascript
import { TikTokIcon } from "@freesewing/react/components/Icon"

TipIcon​

An SVG icon that looks like a light bulb

You can import the TipIcon component from the icon component family in the @freesewing/react package:

Javascript
import { TipIcon } from "@freesewing/react/components/Icon"

TrashIcon​

An SVG icon that looks like a trashcan

You can import the TrashIcon component from the icon component family in the @freesewing/react package:

Javascript
import { TrashIcon } from "@freesewing/react/components/Icon"

TwitchIcon​

An SVG icon that looks like the twitch logo

You can import the TwitchIcon component from the icon component family in the @freesewing/react package:

Javascript
import { TwitchIcon } from "@freesewing/react/components/Icon"

UiIcon​

An SVG icon that looks like a desktop screen

You can import the UiIcon component from the icon component family in the @freesewing/react package:

Javascript
import { UiIcon } from "@freesewing/react/components/Icon"

UndoIcon​

An SVG icon that looks like a rewind arrow, but takes text to go inside it

You can import the UndoIcon component from the icon component family in the @freesewing/react package:

Javascript
import { UndoIcon } from "@freesewing/react/components/Icon"

UnitsIcon​

An SVG icon that looks like a bit of measuring tape

You can import the UnitsIcon component from the icon component family in the @freesewing/react package:

Javascript
import { UnitsIcon } from "@freesewing/react/components/Icon"

UpIcon​

An SVG icon that looks like an up pointing chevron

You can import the UpIcon component from the icon component family in the @freesewing/react package:

Javascript
import { UpIcon } from "@freesewing/react/components/Icon"

UploadIcon​

An SVG icon that looks like a cloud with an arrow pointing upwards in it

You can import the UploadIcon component from the icon component family in the @freesewing/react package:

Javascript
import { UploadIcon } from "@freesewing/react/components/Icon"

UserIcon​

An SVG icon that looks like a person's face

You can import the UserIcon component from the icon component family in the @freesewing/react package:

Javascript
import { UserIcon } from "@freesewing/react/components/Icon"

UxIcon​

An SVG icon that looks like old-timey scales

You can import the UxIcon component from the icon component family in the @freesewing/react package:

Javascript
import { UxIcon } from "@freesewing/react/components/Icon"

WarningIcon​

An SVG icon that looks like an ! in a triangle

You can import the WarningIcon component from the icon component family in the @freesewing/react package:

Javascript
import { WarningIcon } from "@freesewing/react/components/Icon"

WrenchIcon​

An SVG icon that looks like a wrench/spanner

You can import the WrenchIcon component from the icon component family in the @freesewing/react package:

Javascript
import { WrenchIcon } from "@freesewing/react/components/Icon"

XrayIcon​

An SVG icon that looks like a box in dashed lines

You can import the XrayIcon component from the icon component family in the @freesewing/react package:

Javascript
import { XrayIcon } from "@freesewing/react/components/Icon"

ZoomInIcon​

An SVG icon that looks like a magnifying glas with a + inside

You can import the ZoomInIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ZoomInIcon } from "@freesewing/react/components/Icon"

ZoomOutIcon​

An SVG icon that looks like a magnifying glas with a - inside

You can import the ZoomOutIcon component from the icon component family in the @freesewing/react package:

Javascript
import { ZoomOutIcon } from "@freesewing/react/components/Icon"