Icon
Type: React component
How to get Icon?
JavaScript
import { Icon } from 'fds/components';
Renders an icon from the FontAwesome (v5 Pro) library with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.
Props
color
Name (Optional)
Type: String
The name of the color to use in the component. FDS has implemented a color palette for all of the components implemented in the library.
When building a custom component, try to use the existing colors as much as possible. Try to find an FDS component which is similar to the component you're building. When using colors this way, you can guarantee your component will use the correct color when the style of the library updates.
The possible values can be found in the example.
Related links
Default value
icon
(Optional)
Type: String
The name of the icon displayed in the component.
This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.
flip
Horizontal (Optional)
Type: Boolean
Visually mirrors the icon horizontally.
Default value
flip
Vertical (Optional)
Type: Boolean
Visually mirrors the icon vertically.
Default value
tooltip
Content (Optional)
Type: String | ReactElement
The content of the tooltip that is displayed when hovering over the whole component.
-
string: the textual content of the tooltip
-
ReactElement: a React Element (instance of a React Component, usually created with JSX)
Default value
-
size
(Optional)
Type: String
The size of Icon to render. The possible values are:
-
's'
-
'm'
-
'l'
Default value
-