Version 0.40.0

UI Atoms

Icons

Application icons gallery

Icons sizes

atoms/icons/project/project atoms/icons/project/project atoms/icons/project/project atoms/icons/project/project
<i class="sui-a-icon as--sm">
    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/project</title><path d="M8.2 3L10 4.75h7.2c.99 0 1.8.787 1.8 1.75v8.75c0 .962-.81 1.75-1.8 1.75H2.8c-.99 0-1.8-.788-1.8-1.75V4.75C1 3.788 1.81 3 2.8 3h5.4zm2.8 9v1h5v-1h-5zm-3-2v1h8v-1H8zM5 8v1h11V8H5z" fill="#000" fill-rule="evenodd"/></svg>
</i>


<i class="sui-a-icon">
    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/project</title><path d="M8.2 3L10 4.75h7.2c.99 0 1.8.787 1.8 1.75v8.75c0 .962-.81 1.75-1.8 1.75H2.8c-.99 0-1.8-.788-1.8-1.75V4.75C1 3.788 1.81 3 2.8 3h5.4zm2.8 9v1h5v-1h-5zm-3-2v1h8v-1H8zM5 8v1h11V8H5z" fill="#000" fill-rule="evenodd"/></svg>
</i>


<i class="sui-a-icon as--lg">
    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/project</title><path d="M8.2 3L10 4.75h7.2c.99 0 1.8.787 1.8 1.75v8.75c0 .962-.81 1.75-1.8 1.75H2.8c-.99 0-1.8-.788-1.8-1.75V4.75C1 3.788 1.81 3 2.8 3h5.4zm2.8 9v1h5v-1h-5zm-3-2v1h8v-1H8zM5 8v1h11V8H5z" fill="#000" fill-rule="evenodd"/></svg>
</i>


<i class="sui-a-icon as--xl">
    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/project</title><path d="M8.2 3L10 4.75h7.2c.99 0 1.8.787 1.8 1.75v8.75c0 .962-.81 1.75-1.8 1.75H2.8c-.99 0-1.8-.788-1.8-1.75V4.75C1 3.788 1.81 3 2.8 3h5.4zm2.8 9v1h5v-1h-5zm-3-2v1h8v-1H8zM5 8v1h11V8H5z" fill="#000" fill-rule="evenodd"/></svg>
</i>


<i class="sui-a-icon as--fa-home as--sm"></i>


<i class="sui-a-icon as--fa-home"></i>


<i class="sui-a-icon as--fa-home as--lg"></i>


<i class="sui-a-icon as--fa-home as--xl"></i>

Icons margins & align with text

atoms/icons/project/project Text Text atoms/icons/project/project Text Text atoms/icons/project/project
<i class="sui-a-icon as--start">
    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/project</title><path d="M8.2 3L10 4.75h7.2c.99 0 1.8.787 1.8 1.75v8.75c0 .962-.81 1.75-1.8 1.75H2.8c-.99 0-1.8-.788-1.8-1.75V4.75C1 3.788 1.81 3 2.8 3h5.4zm2.8 9v1h5v-1h-5zm-3-2v1h8v-1H8zM5 8v1h11V8H5z" fill="#000" fill-rule="evenodd"/></svg>
</i>
Text 


Text
<i class="sui-a-icon as--between">
    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/project</title><path d="M8.2 3L10 4.75h7.2c.99 0 1.8.787 1.8 1.75v8.75c0 .962-.81 1.75-1.8 1.75H2.8c-.99 0-1.8-.788-1.8-1.75V4.75C1 3.788 1.81 3 2.8 3h5.4zm2.8 9v1h5v-1h-5zm-3-2v1h8v-1H8zM5 8v1h11V8H5z" fill="#000" fill-rule="evenodd"/></svg>
</i>
Text 


Text
<i class="sui-a-icon as--end">
    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/project</title><path d="M8.2 3L10 4.75h7.2c.99 0 1.8.787 1.8 1.75v8.75c0 .962-.81 1.75-1.8 1.75H2.8c-.99 0-1.8-.788-1.8-1.75V4.75C1 3.788 1.81 3 2.8 3h5.4zm2.8 9v1h5v-1h-5zm-3-2v1h8v-1H8zM5 8v1h11V8H5z" fill="#000" fill-rule="evenodd"/></svg>
</i>

Text Text Text Text
<i class="sui-a-icon as--start as--fa-home"></i>
Text 


Text
<i class="sui-a-icon as--between as--fa-home"></i>
Text 


Text
<i class="sui-a-icon as--end as--fa-home"></i>

Example with buttons

<button class="sui-a-button as--primary">
    <i class="sui-a-icon as--start">
        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/project</title><path d="M8.2 3L10 4.75h7.2c.99 0 1.8.787 1.8 1.75v8.75c0 .962-.81 1.75-1.8 1.75H2.8c-.99 0-1.8-.788-1.8-1.75V4.75C1 3.788 1.81 3 2.8 3h5.4zm2.8 9v1h5v-1h-5zm-3-2v1h8v-1H8zM5 8v1h11V8H5z" fill="#000" fill-rule="evenodd"/></svg>
    </i>
    My button
</button>

<button class="sui-a-button as--secondary">
    My button
    <i class="sui-a-icon as--fa-arrow-right as--end"></i>
</button>

<button class="sui-a-button as--link">
    <i class="sui-a-icon as--start">
        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>atoms/icons/project/project</title><path d="M8.2 3L10 4.75h7.2c.99 0 1.8.787 1.8 1.75v8.75c0 .962-.81 1.75-1.8 1.75H2.8c-.99 0-1.8-.788-1.8-1.75V4.75C1 3.788 1.81 3 2.8 3h5.4zm2.8 9v1h5v-1h-5zm-3-2v1h8v-1H8zM5 8v1h11V8H5z" fill="#000" fill-rule="evenodd"/></svg>
    </i>
    My button
</button>

Font Awesome icons

Use .as--fa-xxxx modifiers to use Font Awesome 4.7.0 icons.

FontAwesome 4.7 Icons

<i class="sui-a-icon as--fa-home as--lg"></i>


<i class="sui-a-icon as--fa-flash as--lg"></i>

React

Name: saagie-ui/atoms/Icon

Saagie & Font Awesome icons

Dependencies

React PropTypes

Example

Code Example

import React from 'react';
import { Icon } from 'saagie-ui/react';

class IconExample extends React.Component {
  render() {
    return (
      <div>
        <Icon name="fa-home" />
        <Icon name="close" position="between" className="my-custom-class another-class" />
        <Icon name="project" />
      </div>
    );
  }
}

export default IconExample;

Arguments

Params Type Details
name string Icon name. Use `fa-xxxx` for Font Awesome.
className (optional) string CSS class names.
position (optional) string CSS margins & align with text without the as-- prefix.
size (optional) string CSS size without the as-- prefix.