furl
Getting startedDesignComponents
Design
Design GuidelinesTypography SystemLayout SystemColor palettesCustomization
Components
ComponentsAccordionAlertAnchorAudioAvatarBadgeBreadcrumbsButtonButtonGroupCalendarCardCollapseContextButtonDividerDropdownFooterFormGraphGridHyperlinkIconIframeImageInputItemLayoutListLoaderMediaObjectMenuModalNotificationPaginationPopoverProgressSearchStepsSwitchTableTabsTooltipTypographyVideo

Icon

Icons provide visual context for the content they surround.

Icons are powered by Feather.

Examples

        
import React from 'react';
import ReactDOM from 'react-dom';
import { Icon } from 'furl-components';

ReactDOM.render(
  <Icon 
    name='bell'
    width={32}
    height={32}
    stroke='#ff8c69'
  />, 
  document.getElementById('root')
);

API

Icon props
Property Description Type Default
name icon name string
width icon width int/string 24
height icon height int/string 24
viewBox icon view box string '0 0 24 24'
fill icon fill color string 'none'
stroke icon stroke color string 'currentColor'
strokeWidth icon stroke width number 2
strokeLinecap icon stroke linecap string 'round'
strokeLinejoin icon stroke likejoin string 'round'

Notes

  • You can find a full list of all the available icon name values here.
  • width and height accept any valid CSS value, including CSS variables.
  • viewBox, fill, stroke, strokeWidth and strokeLinecap accept any valid CSS value for each of these properties.

furl was designed and developed by Angelos Chalaris © 2019
Documentation generated using Gatsby, hosting by Netlify