Related Videos

• Getting started with text

  Text is one of the crucial components of interface design. It can help determine the legibility and appeal of your design.

  Your decisions around text can impact how successfully you convey your message. Everything from the placement and arrangement of text, to the choice of font, has a part to play.

  Figma's text rendering

  There can often be a difference in how browsers and operating systems render text. This can make designing across systems and platforms unpredictable.

  Figma uses its own custom text rendering. This ensures your designs look consistent, regardless of your browser or operating system.

  Getting Started

  • Create type layers with the Text tool
  • Explore OpenType and other text properties

  Fonts

  • Access your local fonts with the Font Helper
  • Add icons to text layers with icon fonts 
  • Manage missing fonts
  • Add text in Chinese, Japanese, and Korean

  Style text

  • Create and apply text styles
  • Create a bulleted list
  • Add links to text
  • Add emoji to text layers

  Edit text

  • Edit text layers
  • Resize text layers
  • Convert text to vector paths
  • Information on changes to line height behavior
• Explore text properties

  Before you start

  Who can use this feature

  Users on any team or plan can use text properties.

  Users with can edit access to a file can apply and adjust text properties.

  Text is a crucial aspect of interface design. Everything from the placement to font choice, has a part to play.

  Text properties allows you to control everything from the appearance and position of text, to resizing behavior and OpenType features.

  In this article, we'll take you through all the properties available for text. As there are a number of properties available we've grouped them by location.

  Text in the properties panel

  Apply and adjust text properties in the Text section of the properties panel.

  Use the annotated image below to identify each property in the properties panel. Click the link to learn more about each property.

  1. Click the icon to view, create and apply Text Styles
  2. Click the arrow to browse a list of web, local and shared fonts to find a typeface or font family
  3. Use the arrow to select a font style or weight
  4. Use the arrow to adjust the size of your text
  5. Adjust the vertical distance between lines of text using the line height field.
  6. Adjust the horizontal distance between letters with letter spacing
  7. Adjust the vertical distance between paragraphs with paragraph spacing.
  8. Select how text overflows or wraps with resizing behavior.
  9. Adjust the horizontal alignment of text within the text box.
  10. Adjust the vertical alignment of text within the text box.
  11. Click to open the type details menu and explore more text properties.

  

  Font family

  There are a few terms associated with a font:

  • A typeface is a set of letterforms and glyphs with similar design features.
  • A font is a file containing the visual details that make up the design of each glyph or letter in that typeface.
  • A font family is the collection of styles that make up a typeface.For example: Helvetica, Times New Roman and Roboto are all font families.

  Figma will use Roboto as the default font for new text layers. You can select another font family using the font picker. Click the arrow to explore styles for thee selected font.

  Font weight

  A typeface can have any number of styles or weights. Every font family will come with its own selection of styles. Some of the styles for the Roboto font family are: thin, light, regular, and medium.

  You can access weights once you select the font family. Adjust the font weight using the field directly below the font family.

  • Click the arrow to explore styles for thee selected font.
  • Use the keyboard shortcuts to increase and decrease the font weight.
    • Mac: Hold down ⌥ Option ⌘ Command and < to increase or > to decrease.
    • Windows: Hold down Ctrl Alt and < to increase or > to decrease.

  Font size

  Font size controls the scale of your text. Figma represents font size in density-independent pixels.

  Adjust the font size using the field next to the font style. There are a few ways to adjust font size:

  • Click the arrow to select a default font size.
  • Enter your own number in the field.
  • Use the keyboard shortcuts:
    • Mac: Hold down Shift ⌘ Command and < to increase or > to decrease.
    • Windows: Hold down Ctrl Shift and < to increase or > to decrease.

  Figma represents text sizes in a few different ways.

  If you're translating your designs to code, your screen resolution will determine the actual size of any text. You can view the CSS pixel value (px) of any text in the Inspect panel.

  If you're exporting your designs to PDF, Figma will render font size using traditional print points (pt).

  Line height

  Line height allows you to control the vertical distance between lines of text in a paragraph. This can help to balance designs and improve readability of your copy. This is the same as line spacing.

  Small line heights can make text difficult to read. Large line heights can make text look messy and disjointed.

  Use the field to adjust the vertical space between lines of text, or use the keyboard shortcuts:

  • Mac: Hold down ⇧ Shift ⌥ Option and < to increase or > to decrease.
  • Windows: Hold down Alt Shift and < to increase or > to decrease.

  Figma allows you to set a fixed line height in pixels (px) or a line height that's a percentage of the font size (%).

  Figma uses a font's intrinsic line height as the default value(Auto), which varies between typefaces. You can switch between fixed and percentage line heights and Figma will convert the value for you, to the nearest pixel.

  Translating line height: The Inspect panel allows you to view your designs as code. Each platform has a different way of representing line height.

  Figma includes the appropriate values and measurements for each platform, as well as alternative units of measurement.

  Letter spacing

  Letter spacing lets you define the space between characters in a word, line, or paragraph. This can determine how easy your text is to read.

  This is not to be confused with kerning, which refers to the process of adjusting space between individual characters in a typeface.

  Adjust the letter spacing for an entire text layer, or a selection of text. To replicate kerning, place the cursor between two letters and adjust the letter spacing.

  Use the field to adjust letter spacing for your selection, or use the keyboard shortcuts:

  • Mac: Hold down ⌥ Option and < to increase or > to decrease.
  • Windows: Hold down Alt and < to increase or > to decrease.

  If you select text with different letter spacing values, Figma will scale the letter spacing proportionally.

  Tip! Tracking describes the letter spacing process in pre-digital systems and is usually represented in pixels (px). Use this formula to convert tracking to letter spacing: 1000px tracking = 100% letter spacing = 1em letter-spacing (CSS)

  Paragraph spacing

  Paragraph spacing lets you control the distance between paragraphs. This can increase or reduce the whitespace around text in your design. White space can help to focus the viewer's attention, as well as increase legibility and readability.

  Figma represents paragraph in pixels (px). Enter a px value in the paragraph spacing field. Or hover above the icon and drag to decrease (left) or increase (right) the value.

  Note: Figma will create a new paragraph when you use the Enter or Return keys. This is something to bear in mind if your text resizing is set to Auto Width.

  Resizing

  The resizing property controls how a text layer shrinks or grows to accommodate its contents. There are three settings available:

  • Auto Width: The width of the text layer will grow so that all the content fits within the layer's bounds. Figma will create new lines of text when you use the Return or Enter key.
  • Auto Height: The height of the text layer will grow to fit its contents. Figma will wrap any lines that extend beyond the original width of the text layer to a new line.
  • Fixed Size: Both the width and height of the text layer will stay the same, regardless of the layer's contents. Figma will wrap any additional text that extends beyond the layer's horizontal bounds. Text can still extend beyond the text layer's vertical bounds without clipping. This can make aligning this with other layers difficult.

  Note: When you click in the canvas to create a text layer, Figma uses Auto Width. If you click and drag in the canvas, Figma will use Fixed Size. If you adjust the size of a text layer after it is created, Figma updates the resizing to Fixed Size.

  Horizontal alignment

  Alignment determines how we distribute text within its bounding box. Horizontal alignment defines how you align the text along the x axis (horizontal).

  Left-aligned text is commonly used for paragraph text. Whereas center-aligned text is often used for shorter lines of text, like headings.

  Use the icons to select the horizontal alignment. Choose from:

  • Left
  • Center
  • Right
  • Justify*

  Justify aligns the first word in each line of text to the left-most edge, and the last to the right-most edge. Figma spaces each word in a line of justified text uniformly.

  Vertical alignment

  Alignment determines how we distribute text within its bounding box. Vertical alignment aligns text along the y axis (vertical).

  Use the alignment icons to select a vertical alignment. Choose from:

  • Top
  • Middle
  • Bottom

  Note: It's only possible to vertically align text in text layers with a Fixed Size. Layers with resizing set to Auto Width or Auto Height will ignore alignment.

  Type Details panel

  The Type Details Panel gives you access to some extra Text properties. You can also access any OpenType features from this panel.

  To open the Type Details panel, click the three dots in the bottom-right corner of the Text section.

  1. View a preview of any text properties
  2. Adjust the horizontal alignment of text
  3. Apply decoration to text, which includes:
     1. Underline
     2. Strikethrough
  4. Offset the first line of text with paragraph indentation
  5. Adjust the letter case. Choose from Uppercase, Lowercase, Capitalize and Small Caps.
  6. Apply any number settings, including: Style, Position, Fractions and any related OpenType features.
  7. Access any OpenType features.
  8. Click to close the Type Details panel.

  

  Preview

  Use the preview at the top of the type details panel to see how a particular property or OpenType feature looks. Hover over any feature or property to see the preview.

  Figma will display sample text that best suits the feature you're previewing. This includes:

  • Blocks of text for alignment, spacing and indentation.
  • Numerals for any number properties.
  • Letters (or combinations of letters) affected by ligatures or stylistic alternatives.

  Decoration

  Apply text decoration to an entire text layer, or to selected text. You have two types of decoration available:

  Strikethrough

  Strikethrough adds a horizontal line through the center of your text.

  Use strikethrough to indicate obsolete or inaccurate information. This allows you to convey its state, without redacting or obscuring the original text.

  Click the icon to apply strikethrough to selected text.

  Underline

  Underline adds a horizontal line along the baseline of your text. Use underline to place emphasis on a particular section of the text, or show that it includes a link.

  Underlining links is considered good practice in web design. If applied consistently, this can help to improve the accessibility of your design.

  Click the icon to apply underline to selected text.

  Tip! Apply an underline to selected text using the keyboard shortcut:

  • Mac: Option U
  • Windows: Ctrl U

  Paragraph indentation

  Paragraph indentation offsets the text in the first line to the right. You can only apply Paragraph indentation to text that uses Text-Align Left.

  A good rule of thumb is to avoid indentations greater than 4 x the font size. We also recommend taking the width of the text layer into account - the wider the layer, the larger the indentation.

  Figma represents paragraph indentation as a pixel (px) value. Use the Paragraph Indent field to adjust paragraph indentation.

  Tip! Paragraph indentation applies to all paragraphs in a text layer. If you wish to indent a single paragraph, you will need to create a separate text layer for it.

  Letter case

  Letter case allows you to change the case of selected text. This is super handy when you want to switch between cases without having to delete and retype your text. Choose from:

  • Uppercase: transforms text to UPPER CASE
  • Lowercase: transforms your text to lower case
  • Capitalize: transforms the first character of every word to upper case. You may know this asTitle case
  • Small Caps : transform text into Small Caps. This displays uppercase letters inline with lowercase letters. While this looks like an UPPERCASE transformation, it's a little different. Small Caps characters usually have different proportions (e.g. weight, aspect ratio).

  Number

  The number section includes any properties or features for numerical figures. The properties in this section will depend on the font family you are using.

  1. Change the figure Style options including: Proportional or Tabular Lining; and Proportional or Tabular Old Style.
  2. Offset numbers as subscript or superscript
  3. Create fractions from numbers. Enter a fraction as X/X

  OpenType features

  OpenType can refer to a format, or a set of features or functions available in a font. In this article, we're referring to OpenType features.

  Figma supports OpenType features across all fonts. Not all fonts support the same OpenType features.

  Typeface creator's have full control over which OpenType features they support. They could be popular features - like kerning, case or numerical figures. Or, custom features like alternative characters or glyphs, and stylistic alternatives.

  OpenType features vary between fonts, so we won't post a list of possible features.

  Instead, we'll show you how to use the Type details panel. This will allow you to explore and interpret a font's available OpenType features.

  Tip Learn more about OpenType and Figma in our blog post: An Ode to OpenType

  Explore OpenType features from the Type Details panel.

  • We display any OpenType features that the font supports below the Numbers setting.
  • We will grey out the OpenType feature if a font does not support it.
  • Hover over a feature's button to view a preview of the feature.
  • We group OpenType features accordingly:

  1. Letterforms including:
     • Ligatures
     • Rare Ligatures
     • Contextual Alternates
     • Ordinals
  2. Stylistic Sets ssxx vary greatly - in name and availability - between fonts. A font can support up to 20 stylistic sets. Some examples include:
     • Stylistic Alternates
     • Alternate Digits
     • Disambiguation
     • Lower case R curves into rounded neighbors
  3. Character Variants cvxx vary greatly - in name and availability - between fonts. These are at the discretion of the typeface creator. They could include the following types of variations:
     • Open Four
     • Closed lower case G
     • Closed lower case A
  4. Horizontal Spacing like: kerning.
  5. More features like: Fraction denominators and numerators.

  

  Other Properties in the Properties Panel

  You can also apply other properties to text layers.

  Fill

  Use the Fill property to apply paints to text.

  1. Find the Fill section of the Properties Panel.
  2. Click the Fill thumbnail to open the Color Picker.
  3. You can then:
     • Select a color from the canvas using the Eyedropper
     • Explore colors and opacities using the sliders
     • Select a color from your available Styles, or from the document's colors
     • Enter a specific HEX or color profile code in the field provided

  Stroke

  Apply stroke properties to text. This will apply a stroke around every character in your selection.

  • Fill
  • Weight
  • Distribution
  • Cap
  • Join
  • Dashes
  • Miter Angle

  

   

  Effects

  Text layers also support shadow and blur effects.

  1. Click the next to the Effects property to add an effect.
  2. Figma will apply Drop Shadow by default. Click the to select another effect:
     • Drop Shadow
     • Inner Shadow
     • Layer Blur
     • Background Blur
  3. Adjust any settings as desired.
• Create type layers with the text tool

  Before you start

  Who can use this feature

  Users on any team or plan can create text layers.

  Users with can edit access to a file can create new Text layers.

  Text is one of the crucial components of interface design. Everything from the placement and arrangement of text, to the choice of font, has a part to play.

  Figma uses its own custom text rendering. This ensures your designs look consistent, regardless of your browser or operating system.

  Create text layers

  Create new text layers using the text tool. 

  • Select the Text tool in the Toolbar.
  • Or, press the T key to use the Text tool keyboard shortcut.

  

  Once you have the Text tool selected, you can create a text layer in the canvas. 

  We have two default behaviors available when you create a new text layer. Figma uses a different text resizing property, depending on which approach you use.

  Single click

  Click on the canvas to create a new text layer. This will create a layer with text resizing set to Auto Width. This allows the width of the text box to grow as you add more text.

  You may also know this as point text, paragraph text or area text.

  1. Single click anywhere on the canvas.
  2. Start typing to create a text layer.
  3. Press Enter or Return to create a new line.

  

  Click and drag

  When the text tool is selected, click and drag on the canvas to create a new text layer.

  This creates a layer with text resizing set to Fixed Size. This allows you to enter longer strings of text and have them wrap and overflow on to a new line. This is also known as area text.

  1. Click somewhere on the canvas.
  2. Drag to create a Text layer with specific dimensions.

  

  Tip! Adjust the resizing behavior in the Text section of the right-side panel. .

• Edit text layers

  Before you Start

  Who can use this feature

  Users on any Figma team or plan can use the text tool

  Users with Edit access to a file to create and edit text layers

  Want to adjust the properties of a Text layer? Check out our Explore Text Properties article.

  You can make changes to the content of any text layer you have created.

  Select text layers

  You can select a single Text layer at a time, or multiple.

  Select a single layer

  Click on the text layer in the canvas or in the layers panel.

  Select multiple text layers

  1. Select the first layer.
  2. Hold down the Shift key.
  3. Click on any additional layers to select them:

  

  Select all text layers

  1. Open the main menu. You can use the keyboard shortcuts:
     • MacOS: Command /
     • Windows: Ctrl /
  2. Search for Select All Text Layers. You can also choose to select layers with the same properties.

  Tip! You can also choose to select Text layers with the same properties!

  Edit the contents

  To make changes to the content of a Text box, you will need to enter Text Edit mode. You can enter text edit mode in a couple of ways:

  • Double-click on the text layer.
  • Select the text layer and press the Enter or Return key.

  Edit the contents of the Text box:

  

  Tip! Once you are in Text edit mode you can click into any other text layer on the page to the enter its contents.

  Note: In order to edit a text layer, you must have the text layer's font installed and accessible. Learn more about accessing local fonts on your computer →

• Add Emoji to Text Layers

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can add Components to text layers.

  You can add emoji to any Text object on your canvas, or in your Comments. Figma uses the Apple emoji style.

  MacOS

  You can add emoji to any Text object via the Emoji Picker:

  1. Create a Text object in the canvas.
  2. Use the keyboard shortcut Ctrl Command Space to display the Emoji picker: 
  3. Type the name of your emoji in the field provided.
  4. Select the emoji from the search results to add it to the Text object.

  Windows

  Before you can add emoji to Text objects, you will need to enable the Touch Keyboard:

  1. Right-click on the Windows task bar.
  2. Click on the Show touch keyboard button.

  You can then add emoji to any Text object via the touch keyboard:

  1. Create a Text object in the canvas.
  2. Click the Touch Keyboard icon.
  3. Select the Emoji option:
  4. Choose the emoji you would like to use, to add it to your Text object.
• Bulleted and numbered lists

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access to a file to create and edit text layers.

  Lists are a great way to organize and emphasize related information. List items in Figma can either be ordered or unordered in the form of a numbered or bulleted list.

  Figma currently supports up to five levels of indentation.

  

  Bulleted lists

  You can use bulleted lists to represent unordered sets of information. Figma bullets will keep the same styling at all levels of indentation. At the moment, bullets cannot be customized.

  Create a bulleted list

  1. Select the Text tool in the toolbar or by pressing the T key
  2. From within the text layer, there are a couple of different ways to start a bulleted list:
     • Enter one of the creation characters below followed by a Space:
       Mac:
       • -
       • *
       • ⌥ Option - 8
       
       Windows:
       • -
       • *
       • Alt + 0 + 1 + 4 + 9
     • In the right sidebar, under the Text properties section, you can also click to open the Type details panel. From the List style property, select Bulleted list.

  

  Note: Paragraph spacing does not work between list items. Any paragraph spacing in a text layer will be applied after the list and between non-list lines of text.

  Tip! You can use ⌘ Command – Shift – 8 to turn an individual text selection or multiple text layers into a bulleted list.

  Numbered lists

  Numbered lists can be used to represent groups of ordered or sequential information. In Figma, numbered list counters rotate between numbers, alphabetical characters, and roman numerals with each indentation:

  

  Create a numbered list

  1. Select the Text tool in the toolbar or by pressing the T key.
  2. From within the text layer, there are a couple of ways to start a numbered list:
     • Enter one of the creation characters below followed by a Space:
       • 1 - .
       • 1 - )
     • Click in the Text section of the right sidebar, then select Numbered list.

  

  Tip! You can use ⌘ Command – Shift – 7 to turn an individual text selection or multiple text layers into a numbered list.

  Format list items

  Keep in mind that keyboard shortcuts will activate automatic list styling.

  Using ⌘ CommandZ immediately after a list shortcut removes the default styling.

  Indentation

  Figma bulleted and numbered lists currently support five levels of indentation. To change a list item's indentation:

  Increase indentation

  • Use Tab - ⌘ Command - ] or Control + ] to increase the indentation of a line.
  • Pressing Tab will increase the indent again.

  Decrease indentation

  • Use Backspace or Delete at the beginning of a list item to delete the counter, but keep the same level of indentation.
  • Each line's indentation can be decreased individually.
  • Use Return or Enter while on an empty list item to decrease indentation.

  List styling

  Text color

  • Changing the text color of a list item will not change the color of the bullet or counter associated with it. Bullets will follow the color of the text layer they are in. 
  • Following list items will take on the text color of the item preceding it.

  

  Stroke

  • Stroke properties are applied to the entire selected text layer.
  • Changes to the weight of your text will apply to the bullet associated with it.

  Effects

  • Effects will be applied to the entire selected text layer. This includes any bullets and counters.

  Tip! Selecting the No list property from the Type panel removes any current list styling from a text selection.

• Create and Apply Text Styles

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create and edit Styles.

  Users with View access to a File can use Styles from libraries they have access to.

  Styles allows you to define a set of properties that can be reused across your team's designs.

  You can apply a Text Style to an entire block of text e.g. headings (h1, h2 etc). Or, to text strings within a text layer e.g.links.

  I want to:

  • Create a Text Style
  • Apply a Style to Text
  • Edit an Existing Text Style

  Create a Text Style

  You can create a Style from an existing Text layer.

  1. Select a Text layer that has the properties you want to reuse.
  2. Click the Style icon (four dots) in the Text section of the Properties Panel: 
  3. Click the "+" icon in the Text Styles menu to create a new style.
  4. Give the Style a name and click Create Style to apply.

  Apply Styles to Text

  You can then apply that Style to other Text layers within that File.

  Tip You can also apply Color and Effect Styles to Text layers!

  1. Select the Text layer you want to apply the Style to.
  2. Click the Style icon (four dots) in the Text section of the Properties Panel.
  3. Select the Style from the options to apply it to the selected Text layer:

  Edit an Existing Style

  You can adjust the properties of an existing Style at any time. This applies to Local Styles, as well as Styles that are published in a Team Library.

  • When editing Local Styles, your changes will immediately be applied to any Text layers in that File. 
  • For Styles in a Team Library, you will need to publish and accept these changes to see them in your designs.

  Learn more about making changes to Styles in our Managing and Sharing Styles article.

• Add text in Chinese, Japanese, and Korean

  Before you start

  Who can use this feature

  Users on any team or plan can use these text properties.

  Users with can edit access to a file can apply and adjust text properties.

  CJK languages refers to scripts that use Chinese characters and their derivatives. This includes Chinese (Simplified and Traditional), Japanese, and Korean.

  Supported fonts

  If you are using the Figma desktop app, you can use any fonts already on your computer. If you're using Figma in the browser, you can install the Figma Font Helper to access your local fonts.

  Mac

  Figma supports the following native fonts, by language:

  • Simplified Chinese 中文: Song, ST Heiti, ST Kaiti, Fang Song
  • Traditional Chinese 中文: Apple LiSung, LiHei Pro, LiSong Pro
  • Japanese 日本語: Osaka, Hiragino
  • Korean 한국어: Hangangche, Seoul, Apple SD Gothic Neo

  Windows

  Figma supports the following native fonts, by language:

  • Simplified Chinese 中文: SimSun, KaiTi, Microsoft YaHei
  • Traditional Chinese 中文: Ming Light, Microsoft JhengHei
  • Japanese 日本語: MS Gothic, MS Mincho
  • Chinese 中文: Microsoft JhengHei, Microsoft YaHei, SimHei
  • Korean 한국어: Dotum, Gulim, Batang, Gungsuh

  Google Noto Fonts

  Google has a repository of open-source fonts that support a variety of syllabary and logogram based languages.

  • Search for languages, regional variations, and font names on the Google Noto website.
  • Filter by Language when looking for Google Web Fonts.

  Figma includes a selection of popular Google Noto fonts in the font picker. This covers both the Serif and Sans Serif versions.

  Select a Noto font

  You can update the font for a selection of text, or an entire text layer.

  1. Select the text layer you want to update.
  2. Open the Design tab in the right sidebar.
  3. Click the next to the current font family.
  4. Search for and select the relevant Noto font.

  Tip! Figma lists some Noto fonts in shorthand. For example: Figma shows Noto Sans Simplified Chinese as Noto Sans SC.

  Listed below are the full name of supported Noto fonts:

  • Noto Sans or Noto Serif (supports most Latin and Cyrillic languages, including English and Russian)
  • Noto Sans or Noto Serif SC (Simplified Chinese)
  • Noto Sans or Noto Serif TC (Traditional Chinese)
  • Noto Sans or Noto Serif JP (Japanese)
  • Noto Sans or Noto Serif KR (Korean)

  Figma displays the name of the following supported languages in full:

  Noto Sans or Noto Serif Bengali, Javanese, Malay, Telugu, Tai, Thai, Tamil, Gujarati and Kannada.

  Font fallback

  Font fallback allows you to use characters and icons that aren't specifically supported by that font.

  If a font doesn't support a character you input, Figma will render that specific character in a Noto font. No more empty spaces or missing character icons.

  For people writing in Chinese, Japanese, or Korean, Figma may choose the wrong version of a character.

  To fix that, you can select your text and update the font to use the specific Noto font for your language. Or select another font that supports the language you’re writing in.

• Add icons to text layers with icon fonts

  Before you start

  Who can use this feature

  Users on any plan can use icon fonts in their designs.

  You will need to have can edit access to a file to edit any text layers.

  Icons are images or symbols that represent specific actions or tools in an interface. You can add icons to your designs as actual images, or use an icon font.

  Icon fonts are fonts that are made up of symbols, as opposed to regular letters and numbers. Like regular text, icon fonts can be styled using CSS, which makes them popular in web development. 

  Font Awesome icons

  By default, Figma supports Font Awesome, a popular set of icons in an easy-to-use font. Font Awesome is free to use, or you can purchase an extended range of icons.

  Font Awesome has both regular or solid versions of an icon. If an icon isn't showing up when you paste it, you may need to switch to the solid style to see the icon.

  

  In Font Awesome

  View and copy icons from the Font Awesome cheatsheet.

  1. Open the Font Awesome cheatsheet
  2. Use the tabs at the top of the page to choose between Solid or Regular Font Awesome icons. You'll need to update the font style in Figma to match: 
  3. Right-click on the icon you want to use and select Copy from the menu to add it to your clipboard:

  In Figma

  1. Create a text object in the canvas.
  2. In the Text section of the properties panel, click the arrow next to the font.
  3. Select the Font Awesome 5 Free font from the list.
  4. Based on your icon choice, use the font style field to select Regular or Solid:
  5. Paste the icon into your text object in Figma using the keyboard shortcut:
     • macOS: Command V
     • Windows: Ctrl V
  6. Figma will display the icon in the canvas:

   

  Other icon fonts 

  If you have a different icon font installed on your device, you can still use these icon fonts in Figma.

  There are a few ways to access fonts from your device:

  • Download the font helper to access local fonts in the browser
  • Use the Figma Desktop app

  Once you have access to your local fonts, you can find any icon fonts in the font picker.