{
  "uiType": "element",
  "name": "Icon",
  "description": "An icon is a glyph used to represent something else",
  "tagName": "ui-icon",
  "exportName": "UIIcon",
  "content": [
    {
      "name": "Icon",
      "attribute": "icon",
      "description": "specify what icon should appear",
      "usageLevel": 1,
      "options": [
        "airplay",
        "alert-circle",
        "alert-octagon",
        "alert-triangle",
        "align-center",
        "align-justify",
        "align-left",
        "align-right",
        "anchor",
        "aperture",
        "archive",
        "arrow-down",
        "arrow-down-circle",
        "arrow-down-left",
        "arrow-down-right",
        "arrow-left",
        "arrow-left-circle",
        "arrow-right",
        "arrow-right-circle",
        "arrow-up",
        "arrow-up-circle",
        "arrow-up-left",
        "arrow-up-right",
        "at-sign",
        "award",
        "bar-chart",
        "bar-chart-2",
        "battery",
        "battery-charging",
        "bell",
        "bell-off",
        "bluetooth",
        "bold",
        "book",
        "book-open",
        "bookmark",
        "box",
        "briefcase",
        "calendar",
        "camera",
        "camera-off",
        "cast",
        "check",
        "check-circle",
        "check-square",
        "chevron-down",
        "chevron-left",
        "chevron-right",
        "chevron-up",
        "chevrons-down",
        "chevrons-left",
        "chevrons-right",
        "chevrons-up",
        "chrome",
        "circle",
        "clipboard",
        "clock",
        "cloud",
        "cloud-drizzle",
        "cloud-lightning",
        "cloud-off",
        "cloud-rain",
        "cloud-snow",
        "code",
        "codepen",
        "codesandbox",
        "coffee",
        "columns",
        "command",
        "compass",
        "copy",
        "corner-down-left",
        "corner-down-right",
        "corner-left-down",
        "corner-left-up",
        "corner-right-down",
        "corner-right-up",
        "corner-up-left",
        "corner-up-right",
        "cpu",
        "credit-card",
        "crop",
        "crosshair",
        "currentColor",
        "database",
        "delete",
        "disc",
        "divide",
        "divide-circle",
        "divide-square",
        "dollar-sign",
        "download",
        "download-cloud",
        "dribbble",
        "droplet",
        "edit",
        "edit-2",
        "edit-3",
        "external-link",
        "eye",
        "eye-off",
        "facebook",
        "fast-forward",
        "feather",
        "figma",
        "file",
        "file-minus",
        "file-plus",
        "file-text",
        "film",
        "filter",
        "flag",
        "folder",
        "folder-minus",
        "folder-plus",
        "framer",
        "frown",
        "github",
        "gitlab",
        "globe",
        "grid",
        "hard-drive",
        "hash",
        "headphones",
        "heart",
        "help-circle",
        "hexagon",
        "home",
        "image",
        "inbox",
        "info",
        "instagram",
        "italic",
        "key",
        "layers",
        "layout",
        "life-buoy",
        "linkify",
        "linkify-2",
        "linkedin",
        "list",
        "loader",
        "lock",
        "log-in",
        "log-out",
        "mail",
        "map",
        "map-pin",
        "maximize",
        "maximize-2",
        "meh",
        "menu",
        "message-circle",
        "message-square",
        "mic",
        "mic-off",
        "minimize",
        "minimize-2",
        "minus",
        "minus-circle",
        "minus-square",
        "monitor",
        "moon",
        "more-horizontal",
        "more-vertical",
        "mouse-pointer",
        "move",
        "music",
        "navigation",
        "navigation-2",
        "octagon",
        "package",
        "paperclip",
        "pause",
        "pause-circle",
        "pen-tool",
        "percent",
        "phone",
        "phone-call",
        "phone-forwarded",
        "phone-incoming",
        "phone-missed",
        "phone-off",
        "phone-outgoing",
        "pie-chart",
        "play",
        "play-circle",
        "plus",
        "plus-circle",
        "plus-square",
        "pocket",
        "power",
        "printer",
        "radio",
        "refresh-ccw",
        "refresh-cw",
        "repeat",
        "rewind",
        "rotate-ccw",
        "rotate-cw",
        "rss",
        "save",
        "scissors",
        "search",
        "send",
        "server",
        "settings",
        "share",
        "share-2",
        "shield",
        "shield-off",
        "shopping-bag",
        "shopping-cart",
        "shuffle",
        "sidebar",
        "skip-back",
        "skip-forward",
        "slack",
        "slash",
        "sliders",
        "smartphone",
        "smile",
        "speaker",
        "square",
        "star",
        "stop-circle",
        "sun",
        "sunrise",
        "sunset",
        "table",
        "tablet",
        "tag",
        "target",
        "terminal",
        "thermometer",
        "thumbs-down",
        "thumbs-up",
        "toggle-left",
        "toggle-right",
        "tool",
        "trash",
        "trash-2",
        "trello",
        "trending-down",
        "trending-up",
        "triangle",
        "truck",
        "tv",
        "twitch",
        "twitter",
        "type",
        "umbrella",
        "underline",
        "unlock",
        "upload",
        "upload-cloud",
        "user",
        "user-check",
        "user-minus",
        "user-plus",
        "user-x",
        "users",
        "video",
        "video-off",
        "voicemail",
        "volume",
        "volume-1",
        "volume-2",
        "volume-x",
        "watch",
        "wifi",
        "wifi-off",
        "wind",
        "x",
        "x-circle",
        "x-octagon",
        "x-square",
        "youtube",
        "zap",
        "zap-off",
        "zoom-in",
        "zoom-out"
      ]
    }
  ],
  "states": [
    {
      "name": "Disabled",
      "attribute": "disabled",
      "description": "appear disabled",
      "usageLevel": 1
    },
    {
      "name": "Loading",
      "attribute": "loading",
      "description": "be used as a simple loader",
      "usageLevel": 1
    }
  ],
  "variations": [
    {
      "name": "Link",
      "description": "be formatted as a link",
      "usageLevel": 1
    },
    {
      "name": "Fitted",
      "description": "be fitted without any space to the left or right of it.",
      "usageLevel": 1
    },
    {
      "name": "Colored",
      "value": "color",
      "description": "be colored",
      "usageLevel": 2,
      "options": [
        {
          "name": "Red",
          "value": "red",
          "description": "be red"
        },
        {
          "name": "Orange",
          "value": "orange",
          "description": "be orange"
        },
        {
          "name": "Yellow",
          "value": "yellow",
          "description": "be yellow"
        },
        {
          "name": "Olive",
          "value": "olive",
          "description": "be olive"
        },
        {
          "name": "Green",
          "value": "green",
          "description": "be green"
        },
        {
          "name": "Teal",
          "value": "teal",
          "description": "be teal"
        },
        {
          "name": "Blue",
          "value": "blue",
          "description": "be blue"
        },
        {
          "name": "Violet",
          "value": "violet",
          "description": "be violet"
        },
        {
          "name": "Purple",
          "value": "purple",
          "description": "be purple"
        },
        {
          "name": "Pink",
          "value": "pink",
          "description": "be pink"
        },
        {
          "name": "Brown",
          "value": "brown",
          "description": "be brown"
        },
        {
          "name": "Grey",
          "value": "grey",
          "description": "be grey"
        },
        {
          "name": "Black",
          "value": "black",
          "description": "be black"
        }
      ]
    },
    {
      "name": "Size",
      "value": "size",
      "usageLevel": 1,
      "description": "vary in size",
      "options": [
        {
          "name": "Mini",
          "value": "mini",
          "description": "appear extremely small"
        },
        {
          "name": "Tiny",
          "value": "tiny",
          "description": "appear very small"
        },
        {
          "name": "Small",
          "value": "small",
          "description": "appear small"
        },
        {
          "name": "Medium",
          "value": "medium",
          "description": "appear normal sized"
        },
        {
          "name": "Large",
          "value": "large",
          "description": "appear larger than normal"
        },
        {
          "name": "Big",
          "value": "big",
          "description": "appear much larger than normal"
        },
        {
          "name": "Huge",
          "value": "huge",
          "description": "appear very much larger than normal"
        },
        {
          "name": "Massive",
          "value": "massive",
          "description": "appear extremely larger than normal"
        }
      ]
    },
    {
      "name": "Spin",
      "description": "be formatted to spin like a loader",
      "usageLevel": 3,
      "attribute": "spin"
    },
    {
      "name": "Inverted",
      "description": "be formatted to appear on dark backgrounds",
      "usageLevel": 2,
      "attribute": "inverted"
    }
  ],
  "settings": [
    {
      "name": "href",
      "type": "string",
      "attribute": "href",
      "description": "Link to a page"
    },
    {
      "name": "target",
      "type": "string",
      "attribute": "target",
      "description": "The target for a link"
    }
  ],
  "supportsPlural": true,
  "pluralName": "Icons",
  "pluralTagName": "ui-icons",
  "pluralDescription": "Icons exist together as a group",
  "pluralVariations": [
    "colored",
    "size"
  ],
  "examples": {
    "defaultAttributes": {
      "icon": "check-circle"
    }
  }
}