diff --git a/docs/source/usage/commandline_interface.rst b/docs/source/usage/commandline_interface.rst
index 3ec276c..e1f9a8e 100644
--- a/docs/source/usage/commandline_interface.rst
+++ b/docs/source/usage/commandline_interface.rst
@@ -98,6 +98,7 @@ Realtime editor on browser
     --mapbox-access-token [mapboxAccessToken]    Access Token for the Mapbox
     -i, --sprite-input [<icon input directory>]  directory path of icon source to build icons. The default <icon
                                                  source> is `icons/`
+    --sdf                                        Allows to use SDF sprite in charites
     --port [port]                                Specify custom port
     -h, --help                                   display help for command
 
@@ -112,4 +113,6 @@ Charites has three options for `serve` command.
 
 - ``--sprite-input`` - If you are building icon spritesheets with Charites, you can specify the directory of SVG files to compile here. See the ``build`` command for more information.
 
+- ``--sdf`` - if this option is used together with ``--sprite-input``, the viewer will generate SDF sprite. If the option is not specified, non SDF sprite will be generated.
+
 - ``--port`` - Set http server's port number. When not specified, the default is 8080.
diff --git a/src/cli/serve.ts b/src/cli/serve.ts
index d9ca75a..ec20c14 100644
--- a/src/cli/serve.ts
+++ b/src/cli/serve.ts
@@ -21,6 +21,7 @@ program
     '-i, --sprite-input [<icon input directory>]',
     'directory path of icon source to build icons. The default <icon source> is `icons/`',
   )
+  .option('--sdf', 'Allows to use SDF sprite in charites')
   .option('--port [port]', 'Specify custom port')
   .option('--no-open', "Don't open the preview in the default browser")
   .action(async (source: string, serveOptions: serveOptions) => {
@@ -30,6 +31,7 @@ program
     options.port = serveOptions.port
     options.spriteInput = serveOptions.spriteInput
     options.open = serveOptions.open
+    options.sdf = serveOptions.sdf
     if (!fs.existsSync(defaultSettings.configFile)) {
       fs.writeFileSync(
         defaultSettings.configFile,
diff --git a/src/commands/serve.ts b/src/commands/serve.ts
index 0f46458..80def26 100644
--- a/src/commands/serve.ts
+++ b/src/commands/serve.ts
@@ -17,6 +17,7 @@ export interface serveOptions {
   port?: string
   spriteInput?: string
   open?: boolean
+  sdf?: boolean
 }
 
 export async function serve(source: string, options: serveOptions) {
@@ -57,7 +58,7 @@ export async function serve(source: string, options: serveOptions) {
       ) {
         return
       }
-      await buildSprite(options.spriteInput, spriteOut, 'sprite')
+      await buildSprite(options.spriteInput, spriteOut, 'sprite', options.sdf)
     }
     await spriteRefresher()
   }
diff --git a/src/lib/build-sprite.ts b/src/lib/build-sprite.ts
index befcd67..bc81eea 100644
--- a/src/lib/build-sprite.ts
+++ b/src/lib/build-sprite.ts
@@ -5,9 +5,10 @@ export async function buildSprite(
   svgPath: string,
   publicPath: string,
   iconSlug: string,
+  sdf = false,
 ): Promise<void> {
   const pxRatios = [1, 2]
   const outPath = path.join(publicPath, iconSlug)
-  await generateSprite(outPath, [svgPath], pxRatios)
+  await generateSprite(outPath, [svgPath], pxRatios, sdf)
   return
 }