Icons
Axure Kit
Carbon
Updates
Common widgets
Style effects
Variables
Selection group
Repeater
Dynamic panel
Introduction
Axure elements
Utilities
UI shell
Tooltip
Toggle
Tile
Text input
Tag
Tabs
Structured list
Slider
Select
Search
Radio button
Progress indicator
Pagination
Overflow menu
Number input
Notification
Modal
Loading
List
Link
Inline loading
Form
File upoader
Dropdown
Date picker
Data table
Content switcher
Code snippet
Checkbox
Button
Breadcrumb
Accordion
Components
Typography
Spacing
Icons
Color
Design elements
Library index
Getting started
Design elements
Copy icon from Sketch
Copy icon from Sketch
↳
Insert SVG file
↳
Use an icon template
↳
Replace icon in a button
↳
Privacy
Have questions? Open an issue on GitHub.
Last updated 29 January 2020
Copyright © 2020 IBM
Terms of Use
Contribute
IBM.com
Copy a Carbon icon from Sketch or insert an SVG image. Use this icon with an icon template to design with proper colors and spacing in Axure RP, or replace an icon in a button with it.
Use the Axure plugin for Sketch to copy and paste icons from IBM icon libraries.
Follow these steps to create an icon that has the proper color and can be positioned based on the original icon size.
Icon symbols are sized based on their artboard in Sketch. When copying and pasting an icon into Axure RP, it will be sized based on the path of the icon, without the artboard.
Insert SVG files downloaded from the carbon-icons GitHub repository.
Insert SVG file
Elements package: Icons
Get the IBM Icons (16px, 20px)
library
Get the IBM Icons (24px, 32px)
library
Download the Axure plugin
for Sketch
Insert the symbol of the selected icon into Sketch from the library.
1.
Draw a rectangle that matches the size and position of the icon in Sketch.
2.
Select both the icon and the rectangle and select
3.
Insert the copied items into Axure RP.
4.
Ungroup and combine the shapes of the icon. To combine the ungrouped shapes, select all, and open the context menu with right-click, then
This will allow setting the color and style effects of the icon as a single object.
.
5.
Transform Shape
Combine
→
Plugins
Axure
→
Copy Selection for RP
→
Icons inserted as SVG need to be converted to Axure RP shapes then combined into one. This will allow setting the color and style effects of the icon as a single object.
Follow these steps to create an icon that has the proper color and can be positioned based on the original icon size.
The SVG has the artboard size of the icon until the SVG is converted to Axure RP shapes, when its size will be based on the path of the icon, without the artboard.
Insert the SVG file using the Image widget or drag and drop it on the Axure RP canvas from a file browser.
1.
Right-click on the SVG image and select
.
3.
Transform Image
Transform SVG to Shapes
→
Align the SVG image to an icon template or to a button with icon.
2.
If the result is a group of objects, delete any transparent rectangles from the group, then ungroup the remaining shapes.
4.
Icons copied from Sketch are group of objects, they need to be ungrouped then combined. This will allow setting the color and style effects of the icon as a single object.
Combine the ungrouped shapes, select all, and open the context menu with right-click, then select . This will allow setting the color and style effects of the icon as a single object.
.
5.
Transform Shape
Combine
→
Use an icon template to create a standalone icon, or replace the icon in a button.
6.
Icon templates in the Carbon Axure library are groups of objects that consist of an icon (with selected color and the disabled style effect) and a spacer.
The style attributes can be copied to the new icon shape after it has been inserted into Axure RP (see Copy icon from Sketch or Insert SVG file).
Use an icon template
Buttons with icon are groups of objects in the Carbon Axure library that consist of the button shape, an icon (with color and style effects for interactions) and an icon spacer.
Replace icon in a button
Follow these steps to replace the icon shape in the template with the newly inserted one after it has been aligned to the template on the canvas:
The icon template has the “Fire Mouse Style Effects” setting enabled for the group. Make sure to keep this for the designed behavior of the icon.
Learn more about designing with icons on the Carbon Design System website.
Drag the new icon shape into the group in the Outline pane.
1.
Select the template icon shape, right-click and copy it.
2.
Delete the template icon shape.
4.
Select the new icon shape, right-click and
3.
Paste Special
Paste Style
→
icon-01 16px
icon-02 16px
icon-03 16px
icon-01 20px
icon-02 20px
icon-03 20px
icon-01 24px
icon-02 24px
icon-03 24px
icon-01 32px
icon-02 32px
icon-03 32px
Use the rectangle as a spacer to align the new icon shape to an icon template or to a button with icon, then delete the rectangle.
6.
:disabled
The style attributes can be copied to the new icon shape after it has been inserted into Axure RP (see Copy icon from Sketch or Insert SVG file).
Follow these steps to replace the icon shape in the button with the newly inserted one after it has been aligned to the button on the canvas:
Buttons with icon have the “Fire Mouse Style Effects” setting enabled for the group. Make sure to keep this for the designed behavior of the button.
Drag the new icon shape into the group in the Outline pane.
1.
Select the old icon shape, right-click and copy it.
2.
Delete the old icon shape.
4.
Select the new icon shape, right-click and
3.
Paste Special
Paste Style
→