Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

An Icon displays a Material Design Icon.

PropTypeNotes
iconstringA Material Design Icon name. See Icon below.
colorstringAny color.
sizenumberThe size of the icon.

Icon

The icon prop can accept either “none” or one of the Material Design Icon names from the list of Icon Names.

Examples

// Overrides

import { Override } from "framer";
import { colors } from "@framer/steveruizok.education/code";

export function IconExample(): Override {
  return {
    color: colors.Primary,
    icon: "accessible",
    size: 24
  };
}
// Code component

import * as React from "react";
import { Frame } from "framer";
// @ts-ignore
import { colors, Icon } from "@framer/steveruizok.education/code";

export const IconExample = props => {
  return (
    <Frame size="100%" background="none">
      <Icon center color={colors.Primary} icon="accessible" size={24} />
    </Frame>
  );
};